Navigation menu with jQuery and nested unordered list

One of the most common requirements on a website is a navigation menu that allow an easy access to its content. A navigation menu is a list of links to the various resources on the website. The most common practice of creating a navigation menu is by using the unordered lists. A navigation menu organizes the links into various categories with each top-level category containing the relevant links. This top-level category can be expanded and collapsed to show and hide the sub-menu items. The expand and collapse operations are triggered on the mouse-over event.
It is very simple to create a navigational menu by using the nested unordered lists with very simple CSS classes. In this post, we will learn to create a simple navigation menu using jQuery. The main elements of the navigation menu are:
1. The HTML Structure
2. The CSS classes for organizing the nested unordered lists into the required positioning.
3. jQuery script for detecting and handling the mouse events

The HTML Structure for navigational menu

The menu structure is defined at the required position on the HTML page. This HTML structure is nothing but a set of nested unordered list elements.

<ul id="nav">
	<li><a href="#">Home</a>
<ul>
	<li><a href="#">Home Sub Link1</a></li>
</ul>
</li>
	<li><a href="#">About Us</a>
<ul>
	<li><a href="#">More info</a></li>
</ul>
</li>
	<li><a href="#">Contact Us</a></li>
	<li><a href="#">Downloads</a></li>
	<li><a href="#">Terms & Conditions</a></li>
</ul>

The above HTML code is the definition of the hierarchy of the required navigation menu items. With the above code added to HTML page area, the resulting display will be similar to the image below.

With this step, the HTML structure for the navigation menu is ready. The next step is to position the parent list tags horizontally and then align the nested unordered lists. This is handled by the styling classes.

The CSS Classes for navigational menu

Our HTML structure has two unordered lists; the parent list and the child lists. So, two separate set of classes are defined to style each level of the lists. The requirement for navigation menu is to horizontally align the parent list.
We can achieve this by using the float and position tags for the parent list items. The sub-menu lists are hidden by default and will appear on the mouseover of the parent list item. The only major difference on the child listings is that the position is set to absolute. This places the child list under the parent list item.

 body {
	font-family:arial;
	font-size:12px;
	}

.clear {
	clear:both;
	}

#nav {
    margin:0;
    padding:0;
    list-style:none;
	}

#nav li {
	float:left;
	display:block;
    background:#4B4B4B;
    position:relative;
    z-index:500;
    margin:0 1px;
    }

#nav li a {
	display:block;
	padding:6px 5px 0 5px;
	font-weight:700;
	height:20px;
	text-decoration:none;
	color:#fff;
	text-align:center;
    }

#nav ul {
	position:absolute;
	left:0;
	display:none;
	margin:0 0 0 -1px;
	padding:0;
	list-style:none;
        }

#nav ul li {
	width:120px;
	float:left;
	border-top:1px solid #fff;
        }

#nav ul a {
	display:block;
	height:15px;
	padding: 6px 5px;
	color:#fff;
	text-align:left;
        }

#nav a:hover {
	text-decoration:none;
	background-color:#F86808;
        } 

The above CSS script transforms the output to look like the following image.

Now, comes the most important part. We have created the child-lists to show the sub-menus. But, those are in hidden state. Here, the jQuery brings in the magic.

The jQuery Script

jQuery is one of the most popular open source JavaScript library. We have been learning quite a few things about jQuery on this blog. To write any jquery scripts on your HTML page, you need to include the core jQuery library into your page.

<script type="text/javascript" src="jquery.js"></script> 

Now, the HTML page is ready to understand the jQuery methods. We write two methods for the mouseover event of parent list items. The purpose is to show the child-list corresponding to the list item being hovered and hide the other child-lists. jQuery provides functions to show and hide the DOM elements. But, let’s try some smooth animation with the .slideDown and .slideUp methods of jQuery.

 $(document).ready(function () {

$('#nav li').hover(

function () {

//show submenu

$('ul', this).slideDown("fast");

},

function () {

//hide submenu

$('ul', this).slideUp("fast");

}

);

});

The final resulting product looks similar to the navigation menu on this blog.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>