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 Similar examples

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="[removed]#">Home</a>
 
<div class="menuInfo">I am some text about the home section</div></li>
<li><a href="[removed]#">Services</a>
 
<div class="menuInfo">I am some text about the services section</div></li>
<li><a href="[removed]#">Clients</a>
 
<div class="menuInfo">I am some text about the clients section</div></li>
<li><a href="[removed]#">Portfolio</a>
 
<div class="menuInfo">I am some text about the portfolio section</div></li>
<li><a href="[removed]#">About</a>
 
<div class="menuInfo">I am some text about the about section</div></li>
<li><a href="[removed]#">Blog</a>
 
<div class="menuInfo">I am some text about the blog section</div></li>
<li><a href="[removed]#">Follow</a>
 
<div class="menuInfo">I am some text about the follow section</div></li>
<li><a href="[removed]#">Contact</a>
 
<div class="menuInfo">I am some text about the contact section</div></li>
 
</ul>
 
</div>
</div>

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.