Freelancer Magazine » menu bar

Building an Awesome Navigation Menu with jQuery: Part 2

Bogdan — Wed, 18 Nov 2009 17:52:53 +0000

This is the second part of a two-part series that will help you build a complex sliding menu, enhanced with modal windows. Click here to read Part 1 of Building an Awesome Navigation Menu with jQuery

This second part will cover building a modal window and coding its behavior. If you don’t know what I already explained, please go back to the first article here and come back once you finish that one. However, if XHTML, CSS and jQuery are your friends, you may pick things up as we go, so just go ahead and read this part of the tutorial.

Let me remind you the concept we described in the previous article. We have a horizontal menu with a few categories. Each category has multiple subcategories and each such subcategory may contain a random number of products. For easier and faster movement of users thorough the site, we won’t reload the page once a subcategory is clicked. Instead, we will display all products in a modal window.

Here’s a screenshot of the menu and one simple modal window.

How does the modal work?

Once someone clicks a subcategory link, the modal window will be displayed and the products will show up. The modal will close when products are clicked, and the browser is targeted to a new page, when the user clicks the close button or when the overlay is clicked. It isn’t that hard is it?

The main issue is that we need different content in the modal window. Each subcategory will have its own products and we need to find out which products to display. We will do this with the help of jQuery as you’ll find out in just a few minutes.

But first, lets get to coding the structure and design of the modal window. First of all, we have the overlay mask, which will be an empty div. We need to make sure the overlay mask will be on top of all site content but beneath the modal window, so we will use z-index:1100 for modal content and z-index:1000 for the overlay. The overlay won’t be displayed unless a subcategory is clicked, so display:none is also mandatory. You should also choose your favorite color for the overlay, and set it absolutely to top left 0 pixels.

<div></div>

#overlay-mask {
	display:none;
	z-index:1000;
	background-color:#333;
	position:absolute;
	top:0;
	left:0;
	}

The modal window will be something like this. An outer div to hold everything in place, another inner div to hold the products, and a link that will server as a close modal window button. Because we want the button to span all the way, we had to use an outer div for the content of the modal, so that’s why there’s 2 divs and not just one.

<div class="all-rounded">
<div>
		<a class="thumb" href="http://www.ultimatewasher.com" target="_new"><img src="images/wash1.jpg" alt="Wash1" width="102" height="102" /><span>First thumb</span></a>
 
		<a class="thumb" href="http://www.city-rentals.ca" target="_new"><img src="images/wash2.jpg" alt="Wash2" width="102" height="102" /><span>Second</span></a>
 
		<a class="thumb" href="http://www.tonsoftools.com" target="_new"><img src="images/wash3.jpg" alt="Wash3" width="102" height="102" /><span>Third</span></a>
 
		<a class="thumb last" href="http://www.carriergenerators.com" target="_new"><img src="images/wash4.jpg" alt="Wash4" width="102" height="102" /><span>Fourth</span></a></div>
<a class="close bottom-rounded">Click to close</a></div>

As you see, each product is in fact a link containing a product thumbnail and some text. Lets see how we style them. the purpose of the tutorial is creating the modal window, not styling it, so the style is really basic, especially if you take out the rounded corners.

#overlay-content {
	width:500px;
	}
 
#overlay-content div {
	width:450px;
	padding:25px;
	padding-bottom:10px;
	}
 
#overlay-content a.close {
	display:block;
	padding:0px;
	border-top:1px solid #333;
	font-size:15px;
	line-height:25px;
	height:25px;
	text-align:center;
	}
 
#overlay-content a.thumb {
	display:block;
	width:102px;
	height:122px;
	padding:0px;
	margin:0px 14px 0px 0px;
	float:left;
	text-decoration:none;
	}
 
#overlay-content a.thumb img {
	display:block;
	width:102px;
	height:102px;
	padding:0px;
	border:0px;
	}
 
#overlay-content a.thumb span {
	display:block;
	width:102px;
	height:20px;
	padding:0px;
	text-align:center;
	color:#999;
	}
 
#overlay-content a.last {
	margin-right:0px;
	}
 
#overlay-content div {
	overflow:auto;
	}

The first two lines are just setting the dimensions of the modal window, for the purpose of a modal window that contains four products, all on the same line. The anchor tag with the “close” class is in fact the button that will be displayed in the bottom of the modal that will be used to close to modal window if needed.

The thumb classed anchor will contain the image and the text description contained in a span tag. As all thumbnails have a small right margin, we need the additional last class to remove the right margin from the last product in the modal. The overflow is used to cancel the collapsing of the inner div that contains only floating elements.

We finished with structure and styling, so lets move on to jQuery coding. Take a look at the code in its entirety and try to understand it. The explanations will follow it just below.

var opacity = '0.8'; // can be up to 1
 
$('a[name=modal]').removeAttr('href'); 	//javascript on, no need to redirect to a link here
$('a[name=modal]').click(function ()
	{
	var maskHeight = $(document).height();
	var maskWidth = $(document).width();
	var windowHeight = $(window).height();
	var windowWidth = $(window).width();
	var contentWidth = $('#overlay-content').width(); // width
	var contentHeight = $('#overlay-content').height(); // and height of content area
 
	//Set height and width to mask to fill up the whole screen
	$('#overlay-mask').css({'width':maskWidth,'height':maskHeight});
	$('#overlay-mask').css('opacity',opacity);
	$('#overlay-mask').css('display','block');
 
        // put the overlay content area in the center of the window
	$('#overlay-content').css('display','block');
	$('#overlay-content').css('left',(windowWidth-contentWidth)/2);
	$('#overlay-content').css('top',(windowHeight-contentHeight)/2);
	});
 
	// move overlay content to center of the window
$(window).resize(function ()
	{
	var maskHeight = $(document).height();
	var maskWidth = $(window).width();
	var windowHeight = $(window).height();
	var windowWidth = $(window).width();
	var contentWidth = $('#overlay-content').width(); // width
	var contentHeight = $('#overlay-content').height(); // and height of content area
 
	//Set height and width to mask to fill up the whole screen
	$('#overlay-mask').css({'width':maskWidth,'height':maskHeight});
	$('#overlay-content').css({'left':(windowWidth-contentWidth)/2});
	$('#overlay-content').css({'top':(windowHeight-contentHeight)/2});
	});
 
var $scrollingDiv = $("#overlay-content");
$(window).scroll(function()
	{
	$scrollingDiv.stop().animate({"marginTop": ($(window).scrollTop()) + "px"}, "fast" );
	});
 
$('#overlay-mask').click(function ()
	{
	$('#overlay-mask').css('display','none');
	$('#overlay-content').css('display','none');
	});
 
$('.close').click(function ()
	{
	$('#overlay-mask').css('display','none');
	$('#overlay-content').css('display','none');
	});

The opacity variable will set the overlays opacity. It would look really odd with a non transparent overlay, so perhaps anything below .8 will do just fine. Except if you have it completely transparent when there isn’t going to be any overlay.

We find all anchor tags that has “modal” as name, and remove their href attribute, as we don’t want to move to another page before seeing the overlay, don’t we?

Then we have the on click behavior. As soon as an anchor link that has an attached modal window is clicked, we get the sizes of the document as well as those of the window. We also check out the width and height of the content inside the modal window.

Next, we set the width and height of the overlay mask using css attributes. We want the overlay to span across the entire page, right? We then set its opacity and make it appear in the page by changing its display property from none (set in the css) to block. We do the same with the content div, and also put it in the center of the browser window.

We also have a resize behavior, which will be triggered if you resize the browser after the page has loaded. If that happens, we check out the dimensions of the document and browser as well, and reset the content window in the center of the page. In the same time, we modify the width and height of the overlay so that it matches the changes triggered by resizing the browser.

If the page has a scrollbar and we scroll either up or down, we use the scroll jQuery trigger to animate the modal back to the center of the page. The stop function there before the animation will make sure that older animations will be stopped if the scroll is used continuously or with small pauses.

Finally, once the overlay mask or close button is clicked, we need to close the modal window, and the last two lines of code do just that.

One small, but real problem!

We haven’t taken in consideration the most important aspect. Each time we load the modal window the content needs to be different. The above code only works for the same content in the modal window such as a contact form, and we need to fix this issue.

First of all, we remove content from the overlay-content inner div and leave it empty. This div will auto-populate with proper content when a subcategory is clicked. Next, we add rel attributes to modal anchor links (those that were named “modal”). We will use unique rel attributes to identify the content we need to load.

We will also add divs that have classes corresponding to each rel attribute, which will contain the content we will load on click. We have to make this divs hidden so they don’t pop up god know where inside your site’s layout. Simple right? But how do we do this via jQuery? Even simpler, using only three lines of code.

Once a modal anchor is clicked we identify its rel attribute, get the html contents of the div that has the same class name as the rel attribute, then populate the inner div in the overlay content with the html content we found. Cool! Here’s the code for that, which we add just below the .click function.

var rel = $(this).attr('rel');
var modal_content = $('.'+rel).html();
$('#overlay-content div').html(modal_content);

And we’re done. You can check out the demo over here, or perhaps you’d like the source code? If so, you can download the source codes for the first part, which is just the sliding menu from here, or if you want the real deal you can get full source codes for modal window too from here.

Building an Awesome Navigation Menu with jQuery: Part 1

Bogdan — Thu, 22 Oct 2009 22:18:51 +0000

Do you need to build a navigation interface that has to handle hundreds of product links? All grouped in categories, subcategories? Perhaps even containing thumbnails? If the answer is yes, here’s a usability path to avoid :

select categories, wait for a page to load
select a subcategory, wait for another page to load
check out products
click to go to desired product

The typical web user only wants to click once or twice to get to the product they want. And if clicks are unavoidable, make sure page loads are minimized! The more clicks and the more page loading they have to go through, the higher the risk they will get lost and never come back to your site. The good news is that you can achieve a good navigation menu that reduces page reloads.

This article is an in-depth tutorial on how you can achieve an expandable navigation menu using valid xhtml coding, valid css and a bit of javascript.

The concept

In order to achieve a fully functional menu for our huge website, we need one that will enable users to choose a category or subcategory in a timely manner, then browse hassle-free for the product they like. In Part 1 of the tutorial, we will create a horizontal bar that contains all the main categories of the products our customer is selling. This menu bar will expand so users will see all sub-categories. In Part 2 of the article, we’ll create the functionality where clicking on a sub-category will trigger an overlay that displays a list of the individual products.

In the image above there’s a sketch of what the site layout should be. We have the menu bar, right under the menu comes a header that can contain images, paragraphs of text, news. You get the picture. Then comes the content area. The menu will expand and push the header together with all elements that come after it down the page, as you can see in the following image.

Sneak peak at what we’re building here

Just in case you cannot wait for the end of the article, just check out the demo over here.

Coding the HTML and CSS

The navigation bar will consist of an unordered list. I have chosen this tag because menus contain lists, therefore an unordered list is the best way to go for this. The part of the menu that will slide will be contained by a div, each item in the navigation menu having a separate div for its information. We will have the header and the content section also contained in a div. Here’s a view on the XHTML structure.


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 	
<head>
	 	
</head> 	
<body> 	
	<div id="wrapper"> for cosmetic purposes. IE: The site background image in the top –> 		
		<ul id="menu" class="all-rounded"> class will round the corners –> 				
			<li><a href="" target="_self">home</a></li>
			<li><a target="_self" >cleaning</a></li>
			<li><a target="_self" >cooking</a></li>
			<li><a target="_self" >gardening</a></li>
			<li><a href="" target="_self">about us</a></li> 			
		</ul> 			
	<div class="menu-extend cleaning"> 
		<ul> 					
			<li><a href="" target="_self">Pressure Washers</a></li>
			<li><a href="" target="_self">Pressure Washers Accessories</a></li>
			<li><a href="" target="_self">Hoses and Water Fittings</a></li>
			<li><a href="" target="_self">Water Pumps</a></li>
			<li><a href="" target="_self">Dry Vacuums</a></li>
			<li><a href="" target="_self">Wet Vacuums</a></li>
			<li><a href="" target="_self">Industrial Vacuums</a></li>
			<li><a href="" target="_self">Specialist Vacuums</a></li>
			<li><a href="" target="_self">Vacuum Cleaner Bags</a></li>
		</ul>
 		<ul>
			<li><a href="" target="_self">Steamers</a></li>
			<li><a href="" target="_self">Scrubber Dryers</a></li>
			<li><a href="" target="_self">Buffers</a></li>
			<li><a href="" target="_self">Floor Care Chemicals</a></li>
			<li><a href="" target="_self">Carpet Care Chemicals</a></li>
			<li><a href="" target="_self">Carpet Cleaning Machines</a></li>
		</ul>
		<ul>
 			<li><a href="" target="_self">Trolleys</a></li>
			<li><a href="" target="_self">Household Cleaning Chemicals</a></li>
			<li><a href="" target="_self">Vehicle Cleaning Chemicals</a></li>
			<li><a href="" target="_self">Cleaning Equipment</a></li>
			<li><a href="" target="_self">Brooms and Brushes</a></li>
			<li><a href="" target="_self">Interchange System</a></li>
		</ul>
		<span class="clear"> </span> 
	</div>
 
	<div class="menu-extend cooking"> 
		expanded menu goes in here for cooking
		<span class="clear"> </span>
	</div>
 
	<div class="menu-extend gardening">
 		expanded menu goes in here for gardening
		<span class="clear"> </span>
	</div>
 
	<div id="header"> 
		<img src="images/header.jpg" width=900 height=200 alt="Header" /> 		</div>
 
	<div id="content"> content area –>
		<h1>Fancy menu</h1>
		<p>Fancy menu info goes here </p>				 		</div>
	</div> 	
</body> 
</html>

I chose to round up the corners of the menu. To create this effect we will use some CSS level 3 and browser specific markup. The navigation bar will also have vertical separators between the items. The separator is consisted of two different lines, each with a custom color. We won’t use images for the separators. Instead we will use the css border property. Each list item in the navigation bar will have a 1px solid left border, and a 1px solid right border. The first element in the list and the last one won’t have the left border, and right border respectively. Here’s the html markup of the modified list, to reflect that there won’t be the above mentioned borders, and the css code:

<ul id="menu" class="all-rounded">
	<li class="no-left-border"><a href="" target="_self">home</a></li>
	<li><a target="_self" >cleaning</a></li>
	<li><a target="_self" >cooking</a></li>
	<li><a target="_self" >gardening</a></li>
	<li class="no-right-border"><a href="" target="_self">about us</a></li>
</ul>

.all-rounded	{
	border-radius:9px;
	-moz-border-radius:9px;
	-webkit-border-radius: 9px;
	}
 
/* these are the rounded corners */
#menu  {
	display:block;
	margin:0px auto;
	width:898px;
	border:1px solid #DD4CAB;
	height:48px;
	background:url('../images/menu_bg.jpg') repeat-x; color:#DD4CAB;
	 } 
 
/* ul style */
#menu li {
	display:block;
	width:178px;
	height:48px;
	line-height:48px;
	float:left;
	text-align:center;
	border-right:1px solid #DD4CAB;
	border-left:1px solid #AD3B87;
	}
 
/* li items style */
#menu li.no-left-border {
	border-left-style:none;
	}
 
/* no border as we said */
#menu li.no-right-border {
	border-right-style:none;
	}

Because I chose to round the corners of the menu, there are some issues while hovering the menu items, so the links that are held by the li items will have to have rounded corners as well. The first link in the menu will have rounded corners on the left side, while the last one will have rounded corners on the right side. Here’s the code for that:

#menu li a	{
	display:block;
	height:48px;
	color:#DD4CAB;
	text-decoration:none;
	}
 
#menu li a:hover	{
	display:block;
	height:48px;
	color:#DD4CAB;
	text-decoration:none;
	background:url('../images/menu_bg_hover.jpg');
	}
 
#menu li.no-left-border a:hover  {
	border-top-left-radius:9px;
	border-bottom-left-radius:9px;
	-moz-border-radius-topleft:9px;
	-moz-border-radius-bottomleft:9px;
	-webkit-border-top-left-radius:9px;
	-webkit-border-bottom-left-radius:9px;
	}
 
#menu li.no-right-border a:hover  {
	border-top-right-radius:9px;
	border-bottom-right-radius:9px;
	-moz-border-radius-topright:9px;
	-moz-border-radius-bottomright:9px;
	-webkit-border-top-right-radius:9px;
	-webkit-border-bottom-right-radius:9px;
	}

Coding the behavior of the menu using jQuery

I am not going to reinvent the wheel here, but jQuery seems to be the best javascript framework out there. If you’re not familiar to jQuery you can find some great tutorials and examples over here.

Javascript for menus? Are you insane!

Some people out there say you must not use javascript for navigation under any circumstances. I am sorry guys, but if you write your code professionally, using javascript for menus can seriously enhance your site’s functionality. The trick they’re talking about is what do you do when javascript is unavailable in the visitors browsers? Well, you have to code your menu in such a way it has progressive enhancement and works just fine if javascript is off. And yes, this menu achieves progressive enhancement. If javascript is turned off, the menu will be directly visible, including the part that should slide when needed. Nothing is inaccessible. Moreover, search engine’s bots will see the site just as if they were a visitor without javascript, so search engine optimization is preserved if using this menu.

Let’s get down to the jQuery

jQuery uses html IDs and classes to identify elements in the html page that it needs to work with. Our menu currently has unique ID, but the “cleaning”, “cooking” and “gardening” links don’t, so we add a class for each of them. The classes are unique too.

<ul id="menu" class="all-rounded">
	<li class="no-left-border"><a href="" target="_self">home</a></li>
	<li><a target="_self" class="cleaning-but">cleaning</a></li>
	<li><a target="_self" class="cooking-but">cooking</a></li>
	<li><a target="_self" class="gardening-but">gardening</a></li>
	<li class="no-right-border"><a href="" target="_self">about us</a></li>
</ul>

In order to achieve progressive enhancement, we must first disable javascript and load the menu page. So far, due to our code the menu displays in its entirety, including the part that in a few minutes will slide beautifully if javascript is on. But if it has to slide, it has to be hidden first, and this is the trick we pick out from our sleeves. The first thing we’re to do with jQuery is to hide the sliding part of the menu. By doing this, people having javascript turned on will not see the menu until they click to expand it. They will only see the menu bar. Here’s the jQuery code needed to achieve this:

$('.menu-extend').hide();

The rest is simple. When you click one item in the navigation bar, you are taken to a page. This happens for the Home and About us links. When you click one of the links in the middle of the menu, the menu will slide and reveal the contents. If there’s another menu visible, clicking to expand one other item will make the expanded section slide back under the navigation bar, then the required content will slide back out. How cool is that?

jQuery code step by step
There’s a bit of jQuery to be written here, so you can take a peak below to the full source code, then continue to the part I dice the code in pieces and explain what I’ve done.

jQuery(document).ready(function($)
 	{
 	// start the magic
 	// if javascript is on, the menu will work ok
 	// Therefore we hide the expanded menu 	$('.menu-extend').hide();
 	$('.clear').height(0);
 	// if the "Detailed menu" button is clicked, fade it out and fade in the "Close menu button"
	// also slide the expanded menu into place
 	$('.cleaning-but').click(function ()
 		{
 		var isVisible = $('.menu-extend').is(':visible');
 		var isVisiblecleaning = $('.cleaning').is(':visible');
 		var isVisiblecooking = $('.cooking').is(':visible');
 		var isVisiblegardening = $('.gardening').is(':visible');
 		if(isVisible)
 			{
 			if(!isVisiblecleaning)
 				{
 				if(isVisiblecooking)
 					{
 					$('.cooking').slideUp("1000", function() { $('.cleaning').slideDown("1000") });
 					}
 				else if(isVisiblegardening)
 					{
 					$('.gardening').slideUp("1000", function() { $('.cleaning').slideDown("1000") });
 					}
 				}
 				else
 				{
 				$('.cleaning').slideUp("1000");
 				}
 			}
 		else
 			{
 			$('.cleaning').slideDown();
 			}
 	    });
 	$('.cooking-but').click(function ()
 		{
 		var isVisible = $('.menu-extend').is(':visible');
 		var isVisiblecleaning = $('.cleaning').is(':visible');
 		var isVisiblecooking = $('.cooking').is(':visible');
 		var isVisiblegardening = $('.gardening').is(':visible');
 		if(isVisible)
 			{
 			if(!isVisiblecooking)
 				{
 				if(isVisiblecleaning)
 					{
 					$('.cleaning').slideUp("1000", function() { $('.cooking').slideDown("1000") });
 					}
 				else if(isVisiblegardening)
 					{
 					$('.gardening').slideUp("1000", function() { $('.cooking').slideDown("1000") });
 					}
 				}
 				else
 				{
 				$('.cooking').slideUp("1000");
 				}
 			}
 		else
 			{
 			$('.cooking').slideDown();
 			}
 	    });
 	$('.gardening-but').click(function ()
 		{
 		var isVisible = $('.menu-extend').is(':visible');
 		var isVisiblecleaning = $('.cleaning').is(':visible');
 		var isVisiblecooking = $('.cooking').is(':visible');
 		var isVisiblegardening = $('.gardening').is(':visible');
 		if(isVisible)
 			{
 			if(!isVisiblegardening)
 				{
 				if(isVisiblecooking)
 					{
 					$('.cooking').slideUp("1000", function() { $('.gardening').slideDown("1000") });
 					}
 				else if(isVisiblecleaning)
 					{
 					$('.cleaning').slideUp("1000", function() { $('.gardening').slideDown("1000") });
 					}
 				}
 				else
 				{
 				$('.gardening').slideUp("1000");
 				}
 			}
 		else
 			{
 			$('.gardening').slideDown();
 			}
 	    });
 	});

The first jQuery code is $(‘.clear’).height(0);. This is used to set the height of the clearing div to 0. We added a clearing div to each of the expanded menu’s divs because all content inside them floats to the left, and would therefor cause the expanded menu div to collapse. By adding the clearing div we avoid that, but we also add 20 unnecessary pixels to the expanded menu’s height. We fix this problem with the code mentioned above.

Then, we have three different onclick functions. Each one does the same thing, but is triggered by a different element in the menu. I will explain the first one. $(‘.cleaning-but’).click(function () is used to trigger clicking on the href tag that contains the link to cleaning menu. That link is identified by the cleaning-but class we added previously. When that link is clicked we don’t have just one behavior, so everything has to go inside a function.

var isVisible = $(‘.menu-extend’).is(‘:visible’); is used to check if there’s any menu currently expanded. The variable will hold either true or false values. Here, the expanded menu is identified by the general class used for it menu-extend. We will use the same process to check what expanded menu is in fact expanded, be it the one for cleaning category, or another one. We will identify those by their unique classes cleaning, cooking and gardening.

We first check if the menu is visible. if(isVisible) will return true if there’s an expanded menu, or false otherwise. If false, we will simply slide down the menu using $(‘.cleaning’).slideDown(); located on the else side of the if. If there’s an expanded menu, we check to see if it is exactly the one we clicked. If it is the same one, we will slide it back up using $(‘.cleaning’).slideUp(“1000″);. If it is another one, we slide up that div using a similar piece of code, then slide down the one needed. $(‘.cooking’).slideUp(“1000″, function() { $(‘.cleaning’).slideDown(“1000″) }); slides up the cooking expanded menu, and after that process is completed, it slides down the cleaning menu. The syntax for such a process is $(‘identifier’).slideUp(duration, callback event – the one triggered after first one is completed);

Here’s a live demo version of the menu. Zip archive download will be available once we publish the second part of this article!

In the concept part we said that the contents of the expanded menu are in fact subcategories, and clicking on a subcategory will reveal the products located in that category. But that is another story and we will discuss it in the second part of the article.

Coming up next
Part 2: Displaying menu items using overlay

The Ultimate Navigation with CSS level 3

Bogdan — Tue, 02 Dec 2008 22:28:39 +0000

Please note that this article is targeted at web designers and developers who are well versed in xHTML/CSS.

Update: A demo of this method can be found here: The Ultimate Navigation CSS Level3 Demo – by Bogdan Pop

One of the toughest tasks in the process of developing your web applications or web sites is choosing the best navigation system. Let’s face it, the easier people get around in your website, the more delighted they are. With this in mind, you have been reading articles on user interface design, layout, and by now you are implementing breadcrumb trails and other list handling techniques, such as the ones described in taming lists article at A List Apart. Everything evolved and now you implement drop down menus. But does this really work on big websites?

BIG websites have an impressive number of pages, features and widgets. Having a drop down menu makes life easier, and breadcrumb navigation shows your location lets you get out of there fast. One issue is that navigation is usually fixed, and if you scroll down the page you get lost. You cannot jump to a similar page, you cannot take a peek at what else is there, and so on. The usual solution would be adding a footer navigation, or adding a top link that takes you back to the navigation area.

Of course, this works ok for you, but users do not really like going back and forth like Sisyphus. There is one solution. Mac OS X has flawless navigation systems, as far as I am concerned. The newly implemented stacks work like a charm, but I am referring here to the menu bar usually seen on top of the desktop. This is what you will achieve in your web applications easily by following the guidelines of this article.

I will use some CSS level 3 tags, which unfortunately do not validate. The good thing is that I will use them for styling purposes only. If you want a validating XHTML 1.0 Transitional menu you will just have to remove that fancy styling.

Building the menu bar

The menu I will build is based on the drop down menu technique, and it is derived from one of Stu Nicholls menus available at CSS Play. This menu will use small Javascript in order to work on IE, but latest updates on CSS Play provide full CSS validation menus.

Let’s start with the content of our menu. below you will find a small list which will be the foundation of our ultimate navigation.

	


	The site
		
			About
			My account
				
					Profile
					Change password
					Change avatar
					My submissions
					My awards
				
			
			Lorem
			Ipsum
		
	
	Articles
	Interviews
	Partners

Now that we built a basic menu using lists, lets apply the CSS to it. Please note that my style will make the ending menu look similar to OS X. The visitors on the website I will implement this are mainly Macintosh users, so I though they should see something familiar.

The best thing about this menu is that it will float on the top of the web page, even if the users scroll. This way, at any time, they will be able to jump wherever they need to inside your website, and more.

Styling the menu

The end menu will have horizontal root, and 2 vertical expanding menus.

	
#menubar {
	width:100%;
	height:25px;
	position:fixed;
	top:0;
	left:0;
	margin:0 auto;
	padding:0;
	background-image:url('images/menubar_default.jpg');
	background-repeat:repeat-x;
	line-height:25px;
	font-size:1.2em;
	z-index:4000;
	}

The menu will span across the entire width of the page, and it will have a fixed position as described above. The background image is optional. Next, we set the default style of the menubar. We do not need any styles applied to the list, such as bullets. The items of the menu will float to left, just like they do under OS X.

	
ul#navmenu {
	margin:0 auto;
	padding:0;
	float:left;
	list-style: none;
	border: 0 none;
	margin-left:25px;
	}

ul#navmenu li {
		margin: 0;
		border: 0 none;
		padding: 0;
		float: left; /*For Gecko*/
		display: inline;
		list-style: none;
		position: relative;
	}

Next, we add some basic style to the first expanding level. The webkit box shadow will apply a shadow effect, which unfortunately will be displayed only on Safari. However, used now, it will probably show up on later versions of the other browsers. The border radius will apply rounded corners to the shadow itself. The last line of the below code will render the menubar top background invisible.

	
ul#navmenu ul {
	margin: 0;
	border: 0 none;
	padding: 0;
	width: 250px;
	list-style: none;
	display: none;
	position: absolute;
	top: 25px;
	left: 0;
	-webkit-box-shadow: 10px 10px 10px #CCCCCC;
	-webkit-border-radius: 5px;
}

ul#navmenu ul li {
	float: none; /*For Gecko*/
	display: block !important;
	display: inline; /*For IE*/
	background-image:none;
}

Now we add the style for the root menubar.

	
ul#navmenu a {
	padding: 0 10px;
	float: none !important; /*For Opera*/
	float: left; /*For IE*/
	display: block;
	color:#000000;
	line-height:25px;
	text-decoration: none;
	height: auto !important;
	height: 1%; /*For IE*/
	text-align:center;
}

ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	color: #FFFFFF;
	background-image:url('images/menubar_hover.jpg');
}

The first expanding menu will have the classic expanding arrow positioned to the right if it expands itself into more links. We also have a basic style for it, and the start and ending classes. The later will also have rounded corners on bottom, which we add with -moz-border-radius-bottomleft and -webkit-border-bottom-left-radius.

	
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
	float: none;
	line-height:25px;
	width:230px;
	text-align:left;
	color: #000000;
	background-image:none;
	background-color:#FFF;
        border-bottom:none;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
	color: #FFF;
	background-image:url('images/menu_ex_hover_bg.jpg');
	background-repeat:repeat-x;
        border-bottom:none;
}

ul#navmenu ul li
	{
	width:250px;
	padding:0px;
	background-color:#FFF;
	border: 1px solid #999999;
	border-top:none;
	border-bottom:none;
	}
ul#navmenu ul li.start
	{
	background-color:#FFF;
	border: 1px solid #999999;
	border-top:none;
	border-bottom:none;
	padding-top:5px;
	}
ul#navmenu ul li.end
	{
	-moz-border-radius-bottomleft:7px;
	-webkit-border-bottom-left-radius:7px;
	-moz-border-radius-bottomright:7px;
	-webkit-border-bottom-right-radius:7px;
	padding-bottom:5px;
	background-color:#FFF;
	border: 1px solid #999999;
	border-top:none;
	}

Let’s add the style for the second level expanding menu. The hover persistence will have a new background image, so that we obtain the reversing of the white and blue colors used in the menu in it’s background and as well in the arrow. We have the start class of the list, which will have the optional rounded top right corner, and the end class which will have both bottom corners rounded.

	
ul#navmenu li:hover li.expand:hover li a,
ul#navmenu li.iehover li.iehover li a {
	background: #FFFFFF;
	color: #000000;
	background-image:none;
        border-bottom:none;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li.expand:hover li a:hover,
ul#navmenu li:hover li.expand:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
	background: #FFFFFF;
	color: #FFF;
	background-image:url('images/menu_ex_hover_bg.jpg');
	background-repeat:repeat-x;
        border-bottom:none;
}

ul#navmenu ul li ul li
	{
	width:250px;
	padding:0px;
	background-color:#FFF;
	border: 1px solid #999999;
	border-bottom:none;
	border-top:none;
	}
ul#navmenu ul li ul li.start
	{
	background-color:#FFF;
	border: 1px solid #999999;
	border-bottom:none;
	padding-top:5px;
	-moz-border-radius-topright:7px;
	-webkit-border-top-right-radius:7px;
	}
ul#navmenu ul li ul li.end
	{
	-moz-border-radius-bottomleft:7px;
	-webkit-border-bottom-left-radius:7px;
	-moz-border-radius-bottomright:7px;
	-webkit-border-bottom-right-radius:7px;
	padding-bottom:5px;
	background-color:#FFF;
	border: 1px solid #999999;
	border-top:none;
	}

And we are done with the styling of the menu.

The javascript

In order to make the menu work on IE, the next simple javascript has to be loaded.

	
navHover = function() {
	var lis = document.getElementById("navmenu").getElementsByTagName("LI");
	for (var i=0; i < lis.length; i++) {
		lis[i].onmouseover=function() {
			this.className+=" iehover";
		}
		lis[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" iehover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", navHover);

IE 6 fixes

Unfortunately, we need a quick fix for IE 6. If we do not use this fix than the navigation bar will remain on top of the page in IE 6 and will not float down as you scroll. Therefor you would need to keep going back to the top of the page instead of just using it whenever you want. You must add to the js file the following code:

function move_box()
{
var offset = 0;
var element = document.getElementById('menubar');

element.style.top = (document.documentElement.scrollTop + offset) + 'px';
}

You must the edit the html and add the following code into the body of the page. The css code will alter the style for IE 6 and change menubar from fixed position to absolute position, while the js part of the fix will make the browser set the new height for the menubar if you scroll down the page.

The graphic elements

In the css above we added some tags that referred to a few JPG files. They are used to make the menu look like OS X. It is not the exact color scheme, but it is something similar. You can use your own styling, even without images. If you fancy, the ones I used are available in the full source codes over here (images, css, html, js).

And you’re done

This was pretty much all on building the ultimate navigation for your websites. Have fun and give the users the chance to love you once again. Below is a screenshot of how this looks on mac OS X Safari.

If you’d like to support our work and advice, just use the social bookmark options in the bar below and bookmark us! And, if you enjoyed this post, please subscribe to our RSS feed.

Author Bogdan Pop is a young Romanian entrepreneur who runs WebRaptor. He loves web programming and design and has a passion for standards and SEO. He relaxes by taking photos every once in a while and by mixing french electronic music.

Ultimate navigation with css level 3