Lately I’ve seen quite a few requests on Twitter and other places for multilevel menus using jQuery and/or CSS. There are quite a few ways to accomplish this and it largely depends on what your needs are.

In this article we’ll take a quick look at several common multilevel menu options and then I’ll show you how to create a “mega menu”.

10 Basic Multilevel Menu Options

Here are a few of the basic drop down menus available from around the web. Don’t let the basic design examples fool you, you can easily customize these with CSS to make them as pretty as your design.

Creating a Mega Menu

I’ve listed quite a few options for several different types of multilevel menus above so you’re bound to find something to fit your project’s needs. However, one type of menu that I really like and don’t see used all too often is the “mega menu”. Take a look at the example to see what I’m talking about.

I’ve put a quick example together of a “mega menu” with two versions. One using only CSS and one using jQuery to spice it up a tad. As you can see, it provides users with more information than just boring text links. There’s a lot of cool stuff you can do with this concept. A great real world example of this type of menu is at Gateway’s website shown below.

Building something like this isn’t as hard as you might think although it might take a little time to style things the way you’d like. Overall it provides better usability and gives visitors easy access to more information without needing to dig around.

The HTML

We’ll start with a basic HTML 4.01 Strict template, title and unordered list with links. I’ve given the ul an ID of “menu1″ because I plan on including more than one in the example. I’ve also given it a class of “cssonly” which we’ll use for the javascript additions later.

Then we’ll add in the sub navigation unordered lists with the following format. I’ll add the same structure to Link 1, 3 and 5. You’ll notice the first list item is a title and we’ve included images and additional text in the sub navigation list items.

Then we’ll position and style the sub navigation lists. To trigger the second level list we’ll change the display property from “display:none” to “display:block” when the first level links are hovered over. It’s important to note that this will not work in IE6 because of IE6’s lack for pseudo selectors. However, once we add some javascript it will fix that.

That’s all you need for the CSS only version but it’s a little boring so lets at some quick jQuery to at least give it a nice sliding effect.

The jQuery

First we’ll remove the “cssonly” class. The reason I’ve done it this way is so that if javascript is disabled then the “cssonly” class will remain in the HTML and the menu will continue to function.

Next we’ll select our menu (#menu2 is the second menu in the example files), find the sub navigation lists and slide them down when we hover over the parent list item. Once we hover out of the parent list item or sub navigation list then it slides back up. Pretty easy eh?

<script type="text/javascript"> $(function(){// If no JS CSS menu will still work $("#menu2").removeClass("cssonly");// Find subnav menus and slide them down $("#menu2 li a").hover(function(){ $(this).parent().find("ul.subnav").slideDown(400); $(this).parent().hover(function(){},function(){// On hovering out slide subnav menus back up $(this).parent().find("ul.subnav").slideUp(400);})});});script>

And there you have it. A quick and easy way to spruce up the regular, boring multilevel menus so commonly used. Keep in mind this is just short demonstration of what could be done. I’ve seen a few websites with more information included.

Conclusion

Hopefully this tutorial and the example menus listed above give you some great ideas for your website or your next project. I seem to hear a lot of people say “well it’s limited here” or “it doesn’t do this very well”. I want to remind everyone that tutorials like these are brief examples of what can be done, we can’t do everything for you. Ideas like these are very flexible and it’s up to all of you creative geniuses out there to take what you’ve learned and make it even better.

Instead of thinking “can’t”, think “can”. It’s just a matter of figuring out how. There’s a lot of creative stuff out there so I hope to see some of this stuff in more templates submitted to Theme Forest.