Fluid Navigation – How to create an informative menu-bar with jQuery & CSS

After a few weeks away in the US, I’m back with a brand new jQuery post – this week taking a look at a new style of navigation menu. jQuery has made it simple for developers to define an idea or wireframe for a component and then implement it reasonably quickly, which has certainly helped it become the most popular JavaScript Framework out there at the moment. I feel like some of the navigation options out there right now don’t provide you with enough information about the sections of a site you can visit, so today we’re going to learn how to create a menu that solves this problem.

Here’s what we’re going to be creating in it’s final form.

First, I’m going to define what the menu can do and we’ll take a look at a rough wireframe I created using MockFlow’s free wireframe generator. We want to create a menu that appears like a standard menu bar in it’s default state, but which on rollover pulls down an information area that covers both the original menubar item and has an expanded section containing the text we want to display. This can be seen in the wireframe below.

Next, let’s begin to create this menu using some basic HTML structure and CSS. We’re going to need a holder for the menu, the menu itself, each item and a div for each of the drop-down elements we’re going to display information in.

<div id="menuBarHolder">
 
<ul id="menuBar">
 
<li class="firstchild"><a href="javascript:#">Home</a>
 
<div class="menuInfo">I am some text about the home section</div></li>
<li><a href="javascript:#">Services</a>
 
<div class="menuInfo">I am some text about the services section</div></li>
<li><a href="javascript:#">Clients</a>
 
<div class="menuInfo">I am some text about the clients section</div></li>
<li><a href="javascript:#">Portfolio</a>
 
<div class="menuInfo">I am some text about the portfolio section</div></li>
<li><a href="javascript:#">About</a>
 
<div class="menuInfo">I am some text about the about section</div></li>
<li><a href="javascript:#">Blog</a>
 
<div class="menuInfo">I am some text about the blog section</div></li>
<li><a href="javascript:#">Follow</a>
 
<div class="menuInfo">I am some text about the follow section</div></li>
<li><a href="javascript:#">Contact</a>
 
<div class="menuInfo">I am some text about the contact section</div></li>
 
</ul>
 
</div>
</div>

We’re now going to style this content. Because we only want to display the extra information for each section when a user hovers over an “li” element, we’re going to hide the information divs until they’re needed. I’ve also noticed that a lot of the popular browsers you guys use (IE aside) support CSS rounded corners, so I’m including this effect to be used for the drop-down menus – it’s visually more pleasing to the eye than corners in some designs, and if you’d prefer you can drop the last few terms in the “menuInfo” class.

This menu is completely cross-browser compatible (yay!) so it’s possible to use rounded corner definitions without needing to worry about how they’ll render in older browsers – everything should gracefully degrade as per necessary.

 
#menuBarHolder { width: 730px; height:45px; background-color:#000; color:#fff; font-family:Arial; font-size:14px; margin-top:20px;}
#menuBarHolder ul{ list-style-type:none; display:block;}
#container { margin-top:100px;}
#menuBar li{  float:left;  padding:15px; height:16px; width:50px; border-right:1px solid #ccc; }
#menuBar li a{color:#fff; text-decoration:none; letter-spacing:-1px; font-weight:bold;}
.menuHover { background-color:#999;}
.firstchild { border-left:1px solid #ccc;}
.menuInfo { cursor:hand; background-color:#000; color:#fff;
width:74px; font-size:11px;height:100px; padding:3px; display:none;
position:absolute; margin-left:-15px; margin-top:-15px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-khtml-border-radius-bottomright: 5px;
-khtml-border-radius-bottomleft: 5px;
 border-radius-bottomright: 5px;
border-radius-bottomleft: 5px;
}

Finally, let’s take a look at the jQuery for our Fluid Menu. We want to add hover cases to each element of our menu so that when a user moves their mouse over a menu-item, the information div animates into place elegantly. To achieve this, we’re simply going to use jQuery’s built-in slideDown and slideUp effects as they provide the most efficient way to achieve the effect we want with the least amount of code.

We also want users to be able to click on the entire “li” element rather than the links inside them, so we’re going to bind a pseduo-click event to all the menu’s li’s by means of document.location.href and an attribute check on the href of their child links.This is achieved as follows:

$(document).ready(function()
{
 
$('#menuBar li').click(function()
{
  var url = $(this).find('a').attr('href');
  document.location.href = url;
 
});
 
$('#menuBar li').hover(function()
{
   $(this).find('.menuInfo').slideDown();
},
function()
{
  $(this).find('.menuInfo').slideUp();
 
});
 
});

and that’s it!. You can now easily set additional information for any of the menu items in your menu-bar and if needed you can easily extend the length of the drop-downs to suit your needs. You can find a demo and download links to all of the code in today’s post below.

Demo: http://addyosmani.com/resources/fluid-menu/fluid-menu.html

Download: http://addyosmani.com/resources/fluid-menu/fluid-menu.zip