As part of a new UI library, I have built a multi-level drop-down (dropdown) menu feature using CSS and jQuery in a manner that follows the guidelines found in the Webgrown Solutions UI Manifesto. The drop-down menu supports the following features:
The menu above, in the header of this website, is the demo itself.
Just some basic page elements (<nav>, <section>, <h1>, <ul>, <li>, <h2>, <h3>, and <a>), with a normal class attribute and some custom data (data-*) attributes to allow feature customization. Once the CSS and Script stuff are in place on a website, any page can implement the Drop-Down Menu by simply setting the top-level wrapping element (e.g. <nav> or <div>) of the menu markup with the class attribute to "dropDownMenu", and setting the desired optional custom data attributes. The custom data attributes are optional, so the accordion could simple have only the standard markup plus the class attribute.
That sounds like a DRY solution to me (see UI Manifesto).
<nav class="dropDownMenu"
data-userEventToTriggerOpen="click">
<section>
<h1>UI Library</h1>
<ul>
<li><a href="/ui/library/accordion/">Accordion</a></li>
<li>Autocomplete</li>
...
<li><a href="/ui/library/datetimetextbox/">DateTime Textbox</a></li>
<li>E-mail Textbox</li>
<li><a href="/ui/library/grid/">Grid (data table)</a></li>
...
<li>
<h2>Menu (Drop-Down)</h2>
<ul>
<li><a href="/ui/library/dropdownmenu/">Get the Menu Code</a></li>
<li><a href="/ui/library/dropdownmenu/#1.1">Level Two Test #1</a></li>
<li>
<h3>Level Two Test #2</h3>
<ul>
<li><a href="/ui/library/dropdownmenu/">Get the Menu Code</a></li>
<li><a href="/ui/library/dropdownmenu/#2.1">Level Three Test #1</a></li>
<li><a href="/ui/library/dropdownmenu/#2.2">Level Three Test #2</a></li>
</ul>
</li>
<li><a href="/ui/library/dropdownmenu/#1.3">Level Two Test #3</a></li>
</ul>
</li>
...
</ul>
</section>
<section>
<h1>Website Solutions</h1>
<ul>
<li>Ajax Gets</li>
<li>Ajax Posts</li>
<li>Authentication System</li>
...
</ul>
</section>
</nav>
//Enable Drop Down Menu(s)
$(parentElementSelector + " .dropDownMenu").each(function () {
if ($(this).attr("data-userEventToTriggerOpen") == "mouse") {
//Level 1
$(".dropDownMenu section h1").mouseenter(function () {
$(this).parent().children("ul").slideDown("medium");
$(this).parent().parent().children("section").mouseleave(function () { $(this).children("ul").hide(); });
});
//Level 2
$(".dropDownMenu section ul li h2").mouseenter(function () {
$(this).parent().children("ul").slideDown("medium");
$(this).parent().mouseleave(function () { $(this).children("ul").hide(); });
});
//Level 3
$(".dropDownMenu section ul li ul li h3").mouseenter(function () {
$(this).parent().children("ul").slideDown("medium");
$(this).parent().mouseleave(function () { $(this).children("ul").hide(); });
});
}
else {
//Level 1
$(".dropDownMenu section h1").click(function () {
$(this).parent().children("ul").slideToggle("medium");
$(this).parent().parent().children("section").mouseleave(function () { $(this).children("ul").hide(); });
});
//Level 2
$(".dropDownMenu section ul li h2").click(function () {
$(this).parent().children("ul").slideToggle("medium");
$(this).parent().mouseleave(function () { $(this).children("ul").hide(); });
});
//Level 3
$(".dropDownMenu section ul li ul li h3").click(function () {
$(this).parent().children("ul").slideToggle("medium");
$(this).parent().mouseleave(function () { $(this).children("ul").hide(); });
});
}
});
/* This CSS contains styling specific to this website,
* but it should provide the essentials and then some.
*/
nav.dropDownMenu
{
clear:left;
float:left;
margin:22px 0px 0px 30px;
}
nav.dropDownMenu section
{
float:left;
margin:0px 6px 0px 0px;
}
nav.dropDownMenu section h1
{
float:left;
margin:0px 0px -26px 0px;
font-family: Comic Sans MS, Comic Sans MS, cursive;
font-size:1em;
color:#50692A;
background-color:#B1D336;
padding:2px 6px 13px 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
cursor:pointer;
}
nav.dropDownMenu section ul
{
display:none;
position:absolute;
margin:25px 0px 0px 0px;
border:1px solid #50692A;
border-bottom-width:0;
z-index:999999;
}
nav.dropDownMenu section ul li
{
width:250px;
border-bottom:1px solid #50692A;
padding:6px;
color:#50692A;
font-weight:bold;
background-color:#FFF;
}
nav.dropDownMenu section ul li.comingSoon
{
background-image:url(/images/comingSoonMenuDisplay.png);
background-position:140px -13px;
background-repeat:no-repeat;
color:#B8AFA2;
}
nav.dropDownMenu section ul li a, nav.dropDownMenu section ul li a:active, nav.dropDownMenu section ul li a:visited, nav.dropDownMenu section ul li h2, nav.dropDownMenu section ul li ul li h3
{
color:#50692A;
text-decoration:none;
padding:6px;
margin:-6px;
display:block;
cursor:pointer;
}
nav.dropDownMenu section ul li a, nav.dropDownMenu section ul li a:active, nav.dropDownMenu section ul li a:visited
{
background-image:url(/images/menuLevelOneArrow.png);
}
nav.dropDownMenu section ul li a:hover, nav.dropDownMenu section ul li h2:hover, nav.dropDownMenu section ul li ul li h3:hover
{
color:#6D8F3A;
text-decoration:none;
cursor:pointer;
}
nav.dropDownMenu section ul li h2, nav.dropDownMenu section ul li ul li h3
{
font-size:1em;
}
nav.dropDownMenu section ul li.level2Header
{
background-image:url(/images/menuLevelOnePlus.png);
}
nav.dropDownMenu section ul li a, nav.dropDownMenu section ul li a:active, nav.dropDownMenu section ul li a:visited, nav.dropDownMenu section ul li.level2Header
{
background-position:240px 6px;
background-repeat:no-repeat;
}
nav.dropDownMenu section ul li ul /* Level 2 */
{
display:none;
position:absolute;
margin:-25px 0px 0px 256px;
border:1px solid #50692A;
border-bottom-width:0;
z-index:9999999;
}
nav.dropDownMenu section ul li ul li
{
min-width:250px;
border-bottom:1px solid #50692A;
padding:6px;
color:#50692A;
font-weight:bold;
background-color:#FFF;
}
nav.dropDownMenu section ul li ul li ul /* Level 3 */
{
display:none;
position:absolute;
margin:-25px 0px 0px 256px;
border:1px solid #50692A;
border-bottom-width:0;
z-index:9999999;
}
nav.dropDownMenu section ul li ul li ul li
{
min-width:250px;
border-bottom:1px solid #50692A;
padding:6px;
color:#50692A;
font-weight:bold;
background-color:#FFF;
}