[web] Basic javascript for a list-based menu

Started by
2 comments, last by outRider 17 years, 11 months ago
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.
Advertisement
Read Suckerfish dropdowns. No &#106avascript, all CSS (except for IE ofcourse).

<hr />
Sander Marechal<small>[Lone Wolves][Hearts for GNOME][E-mail][Forum FAQ]</small>

Quote:Original post by Sander
Read Suckerfish dropdowns. No &#106avascript, all CSS (except for IE ofcourse).


Agreed. Or Hybrid CSS Dropdowns, depending on what you're aiming for.
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.

This topic is closed to new replies.

Advertisement