Sent by brian ally on 18 January 2005 15:03
> if you could direct your attention to: http://www.em411.com/list/patch
>
> you will notice the way in which one can navigate the menu of patches
> (its music related by the way) but all that aside my question is can a
> menu system like this be created using CSS? Or is it more so a
> Javascript thing?
Sure, i've done the same. You can do this without js if all you want is
for the submenu to be visible when you hover over a particular
list-item. Check out:
http://www.htmldog.com/articles/suckerfish/dropdowns/
IE will need a behaviour to handle the hovering.
Here's a minimal explanation of how to do it for submenus that remain open:
Style your links how you want them, though with *all* of them visible.
For something like this i'd use nested unordered lists but you could
also do it with divs and spans, as this site does. Looks pretty
unweildy, though.
<ul id="nav">
<li><a href="">ableton live template</a>
<ul>
<li><a href="">2 Ableton/MidiOX/Oxygen8 for DJing</a></li>
<li><a href="">23 joy2midi play2live</a></li>
<li><a href="">1 midiox/ableton/oxy8 for DJing</a></li>
<li><a href="">4 Rhodes Refill </a></li>
</ul></li>
etc.
Once you have everything looking good, give your submenus display: none
* Add an onclick event handler to your top-most anchors which toggles
the display property of the corresponding sub-menu.
<a href="foo.html" onclick="toggleMenu(this)">foo</a>
Use the DOM to toggle the display property of the anchor's (sibling?
child? Mozilla's DOM Inspector is your (verbose) friend) submenu ul by
passing 'this' to the handler. This also means you can avoid giving an
id to each and every anchor.
Your function also might use the DOM to check all other top-level
anchors' display properties and set them to 'none' so that other open
menus will close. Or save some processing overhead and don't check; just
set them all to 'none', then set the target to 'block';
* Temporarily. Give your submenus display: block by default in the css
and use a body.onload handler to change that to 'none'. This ensures
that users with javascript disabled will be able to navigate the site,
as all links will be visible.
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
