Multi-level Menus with jQuery and CSS

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.

[JS/CSS] Drop Down Tabs (5 styles) – Dynamic Drive

Drop Down Tabs (5 styles)

[CSS] A cross-browser drop-down cascading validating menu – CSSplay

A cross-browser drop-down cascading validating menu

[JS/CSS] Drop-Down Menus, Horizontal Style – A List Apart

Drop-Down Menus, Horizontal Style

[JS/CSS] Superfish jQuery menu plugin – Joel Birch

Superfish jQuery menu plugin

[JS/CSS] Sexy Drop Down Menu w/ jQuery & CSS – Noupe

Sexy Drop Down Menu w/ jQuery & CSS

[JS/CSS] Free CSS Drop-Down Menu Framework – Lwis.net

Free CSS Drop-Down Menu Framework

[JS/CSS] JavaScript Dropdown Menu with Multi Levels – Leigeber.com

JavaScript Dropdown Menu with Multi Levels

[CSS] Create Vimeo-like top navigation – Janko at Warp Speed

Create Vimeo-like top navigation

[JS/CSS] Smooth Navigational Menu (v1.3) – Dynamic Drive

Smooth Navigational Menu (v1.3)

[JS/CSS] Designing the Digg Header: How To & Download – CSS-Tricks.com

Designing the Digg Header: How To & Download

6 Creative/Advanced Multilevel Menu Options

If you’re looking for a multilevel menu that’s a little less common to fit a more unique design then these are some great options. All of these use javascript and css.

Mif.Menu using Mootools – mifjs.net

Mif.Menu using Mootools

A circular menu with sub menus – CSSplay

A circular menu with sub menus

Fancy Sliding Menu For Mootools – Andrey Sellick

Fancy Sliding Menu For Mootools

Sliding Jquery Menu – hv designs

Sliding Jquery Menu

jQuery (mb)Menu 2.6 – Matteo Bicocchi

jQuery (mb)Menu 2.6

Accordion Menu script (v1.7.1) – Dynamic Drive

Accordion Menu script (v1.7.1)

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.

View Demo
Download Source

Mega Menu Demo

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.

Gateway.com

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.

	!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
	<title>Mega Menu Example</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div class="wrapper">
		<h1>Mega Menu Example #1 (CSS Only)</h1>
		<ul class="mainMenu cssonly" id="menu1">
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
			<li><a href="#">Link 4</a></li>
			<li><a href="#">Link 5</a></li>
		</ul><!-- end ul .mainMenu #menu1 -->
	</div><!-- end div #wrapper -->
</body>
</html>

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.

<li><a href="#">Link 1 &raquo;</a>
	<ul>
		<li class="title">This is the Link 1 title</li>
		<li>
			<a href="#">
				<img src="http://themeforest.s3.amazonaws.com/95_menus/images/icons/firefox-bag.png" alt="Firefox Bag" />
				<span>Link 1a</span>
				<span class="moreinfo">More info about list item and image could go here</span>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="http://themeforest.s3.amazonaws.com/95_menus/images/icons/fixit-bag.png" alt="Fix It Bag" />
				<span>Link 1b</span>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="http://themeforest.s3.amazonaws.com/95_menus/images/icons/globe.png" alt="Globe &amp; Bag" />
				<span>Link 1c</span>
				<span class="moreinfo">More info about list item and image could go here</span>
			</a>
		</li>
	</ul>
</li>

The CSS

First we’ll position and style the first level list and links.

/* Style the menu and position list items */
ul.mainMenu {
	position: relative;
	height: 35px;
	padding: 0 8px;
	background: #fff url(images/menubg.png) repeat-x;
	clear: both;
}
ul.mainMenu li { float: left; list-style: none; }
 
/* Style and position links and images in second level list items */
ul.mainMenu li a {
	display: block;
	height: 19px;
	padding: 8px 12px;
	text-decoration: none;
	color: #666;
}
ul.mainMenu li a:hover {
	color: #222;
	background: url(images/menubg-hover.png) repeat-x;
}

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.

/* When hovering over main list items, show second level lists */
/* This is only for #menu1 */
ul.cssonly li:hover ul { display: block; }
 
/* Position and style second level lists and items */
ul.mainMenu ul {
	position: absolute;
	top: 35px;
	left: 8px;
	padding-top: 5px;
	background: #fdfdfd url(images/shadow.png) repeat-x;
	display: none; /* Hide until parent list item is hovered on */
}
ul.mainMenu ul li { padding: 8px; border-right: dashed 1px #f4f4f4; }
ul.mainMenu ul li:last-child { border: 0; }
ul.mainMenu ul li.title {
	float: none; /* Remove parent float setting */
	padding: 6px 10px;
	border: 0; /* Remove parent border setting */
	border-bottom: dashed 1px #f4f4f4;
	font-size: 11px;
	font-weight: bold;
}
ul.mainMenu ul img { height: 64px; width: 64px; }
ul.mainMenu ul span { display: block; }
ul.mainMenu ul a {
	height: 80px;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	border: solid 1px #ebebeb;
	background: #fff;
}
ul.mainMenu ul a:hover { background: #f4f7fa; }
ul.mainMenu ul a img { opacity: .7; border: 0; }
ul.mainMenu ul a:hover img { opacity: 1; }
 
/* When hovering over a list item link show the more info div */
ul.mainMenu ul a:hover span.moreinfo { display: block; }
 
/* Position and style the more info div */
ul.mainMenu ul span.moreinfo {
	display: none;
	width: 275px;
	position: absolute;
	bottom: -25px;
	left: 12px;
	padding: 6px 10px;
	background: #fff;
	text-align: left;
	font-weight: normal;
}

Lastly, I’ve added some CSS rounded corners so it looks better for those of us using Safari and Firefox. I also included a couple minor fixes for IE6.

/* Rounded corners */
ul.mainMenu { -webkit-border-radius: 6px; -moz-border-radius: 6px; }
ul.mainMenu ul { 
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
}
div.wrapper,
ul.mainMenu ul a { -webkit-border-radius: 10px; -moz-border-radius: 10px; }
 
/* IE6 FIXES */
ul.mainMenu li,
ul.mainMenu li a { _float:left; _display: inline; }

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.

Mega Menu

View Demo
Download Source

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. :-D

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. ;-)


25

Comments

Jarel Remick

I'm a freelance designer, web developer and nerd that lives on the computer and writes for Theme Forest and Net.tutsplus.com in my spare time. When I do get away from the computer, I'm spending time with my girlfriend, hiking, biking and enjoying sunny Las Vegas.