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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <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
Thanks for the tutorial. I'd recommend using the hoverFlow plugin to handle the animation queue.
Thanks for the tutorial. I'd recommend using the hoverFlow plugin to handle the animation queue.
Fluid Navigation – How to create an informative menu-bar with jQuery & CSS…
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….
Fluid Navigation – How to create an informative menu-bar with jQuery & CSS…
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….
Thanks for the tip! I looked into hoverFlow and it certainly looks like something that would be easy enough to integrate into this example. I’ll try it out.
Thanks for the tip! I looked into hoverFlow and it certainly looks like something that would be easy enough to integrate into this example. I’ll try it out.
Nice post. Thanks
Nice post. Thanks
Good idea.
Add stop() before initiate the animation. Otherwise when the mouse passes over and then exit the menu several times the animation occurs without need.
Good idea.
Add stop() before initiate the animation. Otherwise when the mouse passes over and then exit the menu several times the animation occurs without need.
[...] Fluid Navigation – How to create an informative menu-bar with jQuery & CSS [...]
[...] Fluid Navigation – How to create an informative menu-bar with jQuery & CSS [...]
[...] How to create an informative menu-bar with jQuery & CSS (addyosmani.com) [...]
[...] Go to Link Comments [...]
[...] Sun, 07 Feb 2010 22:03:31 +0000 admin Go to Link Comments [...]
[...] tweetmeme_url = "http://addyosmani.com/blog/fluid-navigation-how-to-create-an-informative-menu-bar-with-jquery-in-just-a-few-minutes/"; tweetmeme_style = "compact"; admin Read Post [...]
[...] admin Read Post [...]
Thanks for the tip!. I'll try it out.
No problem at all. I'm glad you enjoyed it.
[...] to create an informative menu-ba… Filed under: web-development — admin @ 10:38 pm admin Read Post [...]
Wonderful menu. Thank you for the lesson? man.
it's amazing, though i don't know how to write the code, i actually use jQuery on my blog, the theme i chose was designed with it
No problems at all!. I'm glad it was useful.
First of all I’d like to say, great article! I’ve got a little question bothering me, I really love the design of your blog and tried to install the same design on my WP blog. Stil, there is some kind of weird php error in the sidebar. Do you have any tips, which version are you using? Please PM me on Twitter @HealthTipz or per e-mail.