The main reason that these menus are becoming so popular amongst the Internet today, is simply because they have a lot to offer. Their simplicity combined with functionality, really makes it a wonderful aspect to implement on any site that relies upon its navigation.

I first decided to build this menu when a client of mine showed me examples of what they wanted. My original thoughts were to base it on a DHTML Drop Down Menu but I decided to base it on a jQuery menu that would offer a little bit more of an edge. In the end, I decided to base it upon the Superfish menu.

For those of us who like to work backwards and see the end result before we get started, here is the end result: Multi-level drop down menu with jQuery

Contents:

• Brainstorming and conception
• HTML Mockup
• Add the CSS
• Include the jQuery
• Finalizing the jQuery

Brainstorming and conception

Before you begin any project, you of course need to have a theory and idea to work around. Depending on the size of the project, you may need some paper or some drawing tools to help aid the thought process, but since the requirements of this project were fairly straight forward, I just made a little model in my head.

I knew of course that if there were any child items below the adult items, they would need to be placed vertically below their adult item. But what if the child items had children items? I decided to keep it simple by making the grandchildren items be placed in a list horizontal from the child items.

Sorry if all this sounds a bit confusing, it will all make sense at the end.

HTML Mockup

Here comes the easy part. A simple HTML mockup of the list. Nothing special. Here is what I made:

<div id="navigation">
<ul class="nav superfish">
<li><a href="#">Menu Item</a>
<ul>
<li><a href="#">Child</a></li>
<li><a href="#">Child</a></li>
</ul>
</li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a>
<ul>
<li><a href="#">Child</a>
<ul>
<li><a href="#">Grandchild</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Menu Item</a></li>
</ul>
</div>

It is important to note that the div container is placed around the list for further CSS editing and manipulation later on and it is good to separate everything into their own sections. You can see this step here.

Add the CSS

Now, let’s get rid of that ugly little thing there and make it look more like something that we would want to work with. I got rid of the list style for the elements and made the list items display inline. This is the CSS I ended up with:

/*** Navigation (Setting up some fonts, colors and more)***/

#navigation{font:14px Arial; background: #454545;}

#navigation a:link, #navigation a:visited{ color: #999999; padding:10px; text-decoration:none;}

#navigation a:hover { color:#fff; text-decoration:none;}

#navigation a:link, #navigation a:visited{color: #999999; padding:10px; text-decoration:none;}

#navigation a:hover { background-color: #75AB2C;  color:#fff; text-decoration:none;}

#navigation .current a:link, #navigation .current a:visited{color: #fff;text-decoration:none;padding:10px;}

/*** Essential styles - Superfish menu (Setting the positions for the list elements etc.) ***/

.nav, .nav * {margin:0;padding:0;list-style:none;}

.nav ul {position:absolute;top:-999em;width:15em;}

.nav li {float:left;position:relative;z-index:99;font-size:12px;}

.nav a {display:block;}

.nav ul li{width: 100%;}

.nav li:hover ul,ul.nav li.sfHover ul {left:-1px;top:2.9em;}

.nav li:hover li ul,.nav li.sfHover li ul {top:-999em;}

.nav li li:hover ul,ul.nav li li.sfHover ul {left:15em;top:0px;}

.nav li:hover ul,.nav li li:hover ul {top: -999em;}

/*** Skinning - Superfish menu (Some final font colors and backgrounds) ***/

.nav li {background-color:#454545;}

.nav li li:hover {background-color:#505050;}

.nav li li li {background-color:#454545;}

.nav li li li:hover {background-color:#505050; color: #ffffff;}

Since it is fairly straightforward, I am not going to go in and explain everything. There are however some other elements placed in the CSS as these are needed for when we add the jQuery effects in.

You can view the CSS file here and you can view this step (with the HTML) here.

Include the jQuery

Now that we have the CSS all setup as well as our HTML, we can move on to including the jQuery to allow the drop down action to ocurr. We can do this simply by inserting the following into the head section of your HTML page:

<link rel="stylesheet" type="text/css" href="superfish.css" media="screen">
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="hoverIntent.js"></script>
<script type="text/javascript" src="superfish.js"></script>

You can check out this step here.

Easy right?

Finalizing the jQuery

Almost done! If you open up your file in your favourite browser, you will notice that the drop downs aren’t quite working. Let’s have a look what we’ve got here. We have the basic list built, included the CSS, added in the jQuery. Why on earth isn’t it working? - It’s because we need to first initialize our jQuery function! We can do this easily by adding the following underneath what we added in before:

< <span class="start-tag">script<span class="attribute-name"> type</span>=<span class="attribute-value">"text/javascript"</span>>
jQuery(function(){
jQuery('ul.superfish').superfish();
});
script>

So now your whole HTML file should look something like:

<head>
  		<link rel="stylesheet" type="text/css" href="superfish.css" media="screen"></link>
		<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
		<script type="text/javascript" src="hoverIntent.js"></script>
		<script type="text/javascript" src="superfish.js"></script>
		<script type="text/javascript">
		jQuery(function(){
			jQuery('ul.superfish').superfish();
		});
		</script>
</head>
<div id="navigation">

	<ul class="nav superfish">
	<li><a href="#">Menu Item</a>
		<ul>
			<li><a href="#">Child</a></li>
			<li><a href="#">Child</a></li>
		</ul>
	</li>

	<li><a href="#">Menu Item</a></li>
	<li><a href="#">Menu Item</a>
		<ul>
			<li><a href="#">Child</a>
				<ul>
					<li><a href="#">Child</a></li>
				</ul>

			</li>
		</ul>
	</li>
	<li><a href="#">Menu Item</a></li>
</ul>
</div>

Go on and give it a try now, and watch the magic! You now have a fully functional drop down menu compatible in Firefox, IE (6 + 7), Safari, Opera and more. Go  on and pat yourself on the back and enjoy your new menu!

You can view the final step here.

• Javascript - Highslide JS