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:
<ul id="top">
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
or something similar (any elements, should work) and call:
// 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:
<div class="nav-wrapper">
<ul id="top">
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
</div>
I used the following CSS:
div.nav-wrapper,
div.nav-wrapper ul,
div.nav-wrapper ul li {
position: static;
z-index: 100;
}