The Ultimate Navigation with CSS level 3

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.

	
<div id="menubar">
<ul id="navmenu">
	<li><a href="javascript:void()" target="_self">The site</a>
		<ul>
			<li class="start"><a href="#" target="_self">About</a></li>
			<li class="expand"><a href="#" target="_self">My account</a>
				<ul>
					<li class="start"><a href="#" target="_self">Profile</a></li>
					<li><a href="#" target="_self">Change password</a></li>
					<li><a href="#" target="_self">Change avatar</a></li>
					<li><a href="#" target="_self">My submissions</a></li>
					<li class="end"><a href="#" target="_self">My awards</a></li>
				</ul>
			</li>
			<li><a href="#" target="_self">Lorem</a></li>
			<li class="end"><a href="#" target="_self">Ipsum</a></li>
		</ul>
	</li>
	<li><a href="javascript:void()" target="_self">Articles</a></li>
	<li><a href="javascript:void()" target="_self">Interviews</a></li>
	<li><a href="javascript:void()" target="_self">Partners</a></li>
</ul>
</div>
	

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.

<!--[if lt IE 7]>
<style type="text/css">
#menubar {
position: absolute;
top: 0px;
left: 0px;
}
</style>
<script type="text/javascript">
window.setInterval(move_box, 1);
</script>
<![endif]-->

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.