Code: cssMenus

Please be aware that this technique was not entirely created by me. I borrowed the ideas from the fantastic Suckerfish Dropdowns.

The CSS has been updated to remedy Microsoft’s craptacular IE 7 bugs and glitches.

That being said, I just thought I would show the world exactly what I did to make the Suckerfish method work with a 4 level deep list in both horizontal and vertical layout modes while maintaining hover persistence.

Here’s the meat:

Menu Example

On to the potatoes:

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. Our CSS and JavaScript rely on the names “navmenu-h” or “navmenu-v”. Here’s an example of a valid nested unordered list:

1. <ul id="navmenu-h">
2. <li><a href="#">Root nav item</a>
3. <ul>
4. <li><a href="#">Sub nav item</a></li>
5. </ul>
6. </li>
7. </ul>

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.

The only thing of note is that I’m using an import filter technique to call my CSS file. This filter prevents non-modern browsers from loading the CSS and allowing nearly all devices to render the page in a navigable way. It looks like this:

1. <style type="text/css">
2. @import"/css/nav-h.css";
3. </style>

What’s with the JavaScript?

Sadly, Internet Explorer 6 and below does not recognize the psuedo class r on any element except the <a> tag. To get this DHTML technique to work properly 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 <li> tags that have a nested <ul> tag. If you viewed the example CSS it probably makes much more sense now.

Since my CSS is only going to be rendered by modern browsers and IE 5.5 or higher, I call my script like this:

1. <!--[if gte IE 5.5]>
2. <script language="JavaScript" src="dhtml.js" type="text/JavaScript"></script>
3. <![endif]-->

You’ll notice that I’m using Microsoft IE conditional comments. By writing out the code like this it prevents browsers other than IE 5.5 or higher from loading the script and thereby decreasing the overall load time.

The bad news

That’s right… this technique does not work in every browser and I’ve only had the opportunity to test it in a select few.

• Firefox 1.x+ : any OS (works!!!)
• IE 5.5+ : Windows (works!!!)
• IE Mac : any version, OS 9-X (probably doesn’t work)
• Safari 2.0+ : OS X (works!!!)
• Safari 1.x : OS X (probably doesn’t work)
• Opera 7+ : any OS (works!!!)
• Opera 1.x-6.x : any OS (probably doesn’t work)

Make Flash obey

Thanks go out to Brian on how to get around the flash “rendering on top of everything” issue… just add the following <param> if you are using this menu system near a flash object and IE is giving you problems:

1. <param name="wmode" value="transparent" />

Working examples

Menu Example

Enjoy! and remember, this technique is not my original idea. The modified code is here for all to use and share. I do not take any credit for the creation of this method.