So recently I was asked to change a navigation style of an existing site to drop-down menus.
Simple, I thought, just use one of the many existing drop-down plugins. I tried many, but most seemed to use hardcoded styles and I had a few problems (some of which I encountered again, writing this).
So I’ve made this, I think it’s fairly robust, but I’m sure there’ll be problems with embedded objects (flash) and select boxes (in <= IE6), but for my needs, it sufficed, so I thought I'd share, in case anyone else needs a simple script to manage drop-downs. To use, create a nest of elements like this:
|
1 2 3 4 5 6 7 |
<ul id="top"> <li> <ul> <li></li> </ul> </li> </ul> |
or something similar (any elements, should work) and call:
|
1 2 3 4 5 |
// jQuery: $('ul#top').dropdownify(); // mootools $('top').dropdownify(); |
Which should create a simple drop-down.
There are a couple of examples, one for jQuery and one for mootools, and the files can downloaded here and here.
I did encounter a problem with IE, mainly due to z-index faults, so with HTML code like the following:
|
1 2 3 4 5 6 7 8 9 |
<div class="nav-wrapper"> <ul id="top"> <li> <ul> <li></li> </ul> </li> </ul> </div> |
I used the following CSS:
|
1 2 3 4 5 6 |
div.nav-wrapper, div.nav-wrapper ul, div.nav-wrapper ul li { position: static; z-index: 100; } |