FoodNetwork.com uses mega menus to make it easier for people to find what they need.
Navigation for web sites is an ever evolving topic. It seems like every year or two there is a new and popular way to direct users around your site. The latest craze in site nav is “mega menus”. These menus are similar to file menus found in desktop applications that everyone is familiar with (ie: the toolbar at the top of an application with options File | Edit | View…). File menu-type navigation has been around the internet for a while but what makes mega menus unique is that they flatten out your site so that more options are available to the user. Instead of taking two or three clicks to get the information they need, your users can get it with a single click. While it might look pretty complicated, creating drop down horizontal menus are incredibly easy to make thanks to jQuery.
Start with the HTML
Using a simple unordered list and some CSS, we can create the basic elements of a menu. Take a look at the following example:
#menu, #menu ul {
margin:0px;
padding:0px;
}
#menu > li {
list-style:none;
margin:0px;
padding:0px;
display:inline;
position:relative;
}
.menu_items {
position:absolute;
display:none;
}
.menu_items > li {
list-style:none;
white-space:nowrap;
}
</style>
<ul id="menu">
<li>
<div>Item 1</div>
<ul class="menu_items">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</li>
<li>
<div>Item 2</div>
<ul class="menu_items">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</li>
<li>
<div>Item 3</div>
<ul class="menu_items">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</li>
</u>
The above HTML and CSS uses list items and the inline display CSS property to make our menus appear horizontally instead of the default vertical layout unordered lists normally take on. Each list item also contains a very basic child list with 3 items a piece. If you were making a mega menu, your child items could contain much more advanced HTML than what we’re using here but for our purposes, a simple list will do.
Hooking up events with jQuery
Here’s where the fun begins. What we want to have happen is every time a user rolls over one of our main menu items, it’ll display that item’s children elements. A couple of years ago this would have taken a fair amount of code to accomplish this task but thanks to jQuery we can make a drop-down list effect with a couple of lines of JavaScript.
$("#menu > li")
.mouseenter(function() {
$(".menu_items", this).show();
})
.mouseleave(function() {
$(".menu_items", this).hide();
});
});
The “mouseenter” and “mouseleave” events are Internet Explorer specific events but the jQuery framework actually makes it possible to handle this event across all major browsers. We’re using these two events instead of the standard “mouseover” and “mouseout” events because the latter two events can have unexpected behavior leading to our event handlers firing more than we’d like them to. I’m not going to go into the full details of these issues so if you want to know more, read more under the “examples” section of the jQuery documentation.
Anyway, back to our example. The JavaScript above, once the document has loaded, it’ll fetch each of our menu items and register event handlers on both the mouseenter and mouseleave events. The “enter” handler looks for the child list and makes it visible while the “leave” handler looks for that same child list and hides it. It’s a very quick and elegant solution for making a drop down menu. Take a look at the drop down menu demo page to see this effect in action.
With only a few HTML elements, some CSS and a couple of lines of JavaScript, you can very easily add a drop down menu to your web site. You should find doing so will make your navigation both simpler and more robust since you’ll be giving your users more ways to get to the content they really need instead of having to know your site’s layout by heart.
(Image courtesy Food Network)