simple CSS jQuery Menu

HTML
This can’t get any simpler. Just make a valid nested unordered list with a root id of “navmenu-h” (for horizontal) or “navmenu-v” (for vertical) and you are all set. The CSS and JavaScript rely on the names “navmenu-h” or “navmenu-v”. Here’s an example of a valid nested unordered list:

 

 

 

You can make this as simple or as complicated as you like. The CSS will take care of the prettiness.

CSS
This is the most complicated part of the entire technique. Way too complicated to list out in detail. Just open the above link, click on the View CSS link, and have a gander. I tried to add as many detailed comments as I could so that making edits would be as easy as possible.

What’s with the JavaScript?

Sadly, Internet Explorer 6 and below does not recognize the psuedo class :hover on any element except the tag. To get around IE’s crappulence we have to add a bit of JavaScript for the poor souls that are still blind to the future.

The script looks at the html of the page and, on a mouseover event, assigns a iehover class to

  • tags that have a nested
  • Leave a comment