Sign in to follow this  

[web] Basic javascript for a list-based menu

This topic is 4228 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I haven't done any web programming in the last 10 years or so, so forgive me if this is question is simple or misguided. I have a div, that contains a set of nested, unordered lists. The div has a CSS class which styles the lists like a basic menu: the top-level list is rendered inline, all other lists are rendered block, it should look like your application menu. I've tried writing a script to do this, and it works somewhat, but I have a feeling there are better ways that I'm not aware of. So, I figured I'd ask, and rely on the experience of others. Here's what I need. -I'd like to change the lists without having to change the script, and add new items to the list without having to remember to add event handlers. (Don't know how to do this, right now I handle the mouseover/mouseout events directly in the HTML). -Whenever the user hovers over a <li> that contains a <ul>, the <ul> should be displayed (did this by manipulating the element's style attribute). -Whenever the user leaves the <li>, the displayed <ul> should be hidden again, unless the user leaves to hover over the <ul> or it's decendants... i.e. if the user leaves the <li> but is in a nested menu three levels down, all menus should remain visible (No idea how to get this working... though IE6 seems to keep the sub-menu open while the mouse is over it, FF hides it when I leave the owner <li>). -Must work on the usual suspects: IE5.5/6, Gecko-based, Opera, etc. All I need are some starting points for the above, I'll be happy to do the hard work myself, but I really don't know where to start since the last time I touched this stuff.

Share this post


Link to post
Share on other sites
Very nice, thanks. I knew about :hover, and knew IE didn't support it, so I figured a single JS solution would be the easiest thing. It's nice to know I was on the right track at least, I was attempting to do something similar to what those guys are doing, though not nearly as polished.

Share this post


Link to post
Share on other sites

This topic is 4228 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this