Line25

How To Create a Cool Animated Menu with jQuery

Read the full post

In this tutorial we’ll be building a cool navigation list complete with a sliding hover effect. Learn how to build the concept in Photoshop, lay out the basic HTML elements, style everything up in CSS then tie it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design.

View the animated menu demo

The design we’ll be building features a cool label image that slides into place under each navigation item on hover. We’ll build the design to work without jQuery first of all to ensure it’s widely accessible to users without Javascript enabled, then enhance the effect with jQuery for the majority of users.

View the animated menu demo

Build the Photoshop concept

Create a new document and fill the background with a light beige. Add a subtle 1.5% noise texture by going to Filter > Noise > Add Noise.

Use a subtle grunge Photoshop brush to add a little extra texture to the top centre of the canvas. Adjust the opacity to tone down the distressed effect.

Draw and fill a rectangle to create the base of the label graphic. Press CMD+T to transform the shape, then drag a guide to highlight the centre point.

Use the Polygonal Lasso tool to draw a small triangle. Use this triangle to clip out the bottom edges. Flip the selection horizontally and align with the guide to ensure the clipping is symmetrical.

Begin adding a range of Layer Style effects to bring the label to life. Start with a Gradient Overlay to add a range of dark to light red tones.

Add a thin stroke using a dark red colour selection with settings of 2px width and aligned to the inside.

Set up an Inner Glow using a slightly lighter red with 100% opacity, Normal blending mode, 50% Choke and 3px in size.

Add a soft Drop Shadow aligned to 90 degrees to give the impression of depth. Reduce the opacity to around 20% to tone down the effect.

Finish off the label with a distressed texture using the subtle grunge brushes. Load the selection of the label shape, inverse and delete out the excess. Change the blending mode to Lighter Color at 35%.

All the menu needs now is a series of text links. Set the fonts up with Helvetica Bold and choose a fill colour from the label. Simulate the hover effect by switching the fill to beige on the active link.

Make a selection of the label graphic and export the image as a PNG24 file with Alpha transparency.

The demo file uses just three images: A textured background image, the red label graphic and a repeating noise texture.

Create the basic HTML structure

View the HTML code

The basic menu system first needs to be laid out as a HTML skeleton. Begin the page with a Doctype, followed by page title and a link to the CSS stylesheet. Write out the menu itself as a good old Unordered List element, with each <li> item containing an anchor.

Style up the design with CSS

View the CSS code

Next, the CSS brings the design to life. Begin the CSS file with a quick reset to remove any default browser styling, then set up the surrounding page design by adding the repeating noise background texture to the page body. Centre up the <ul> with margin: auto; and text-align: center; and clear the element using overflow: hidden;.
Float each <li> item to the left to place each nav item side by side. The rest of the styling can then go directly onto the anchors. Each anchor needs to have the exact dimensions of the label graphic, taking into consideration any padding used to position the text into place. Replicate the font styling from Photoshop using the same bold Helvetica styling, and use the CSS3 text-shadow property to recreate the Photoshop Drop Shadow. Finally, add the label graphic as a background image and set the position to -149px so it is hidden off screen until the mouse hovers the nav item.
Set up the styling for the :hover effects by moving the background back into position and alter the colour of the font and shadow to ensure they can still be seen when the background colour changes.

A preview of the HTML file so far will show a fully working menu design, albeit with basic CSS styling where the label immediately appears and disappears without any cool sliding effects. It’s important to first develop this basic fall back so users without Javascript enabled will still see a hover effect.

Spice up the effect with jQuery

View the Javascript code

In order to add some fancy Javascript effects we first need to head back to the HTML file and link up some JS files. We’ll require three files: The jQuery library, a handy plugin allowing background position animation, and finally our own blank scripts.js file where we’ll write our own code.

View the jQuery code

The first thing to add to our jQuery code is a simple line to turn off the basic CSS effect. Adding a special ‘.js’ class to the anchor with Javascript allows us to add an extra line of CSS to overwrite the original styling. With this out of the way we can then style the actual sliding hover effect. Add a hover function to the anchors within the menu list. On hover, use .animate() to set the backgroundPosition to 0 0, then back off screen on hover-out. A speed of 200 keeps things nice and swift. One extra snippet to add is a .stop(true,true) to prevent the effect looping if the mouse passes over the menu quickly.

View the extra jQuery code

A preview of the effect in the browser will show the label sliding in and out on hover. We can add one extra line to really spruce up the effect. Adding an extra animation to move the label by just 5px creates a cool little bounce effect. Similar effects can also be achieved using easing plugins, but to save linking up extra files this little trick works nicely.

The complete HTML, CSS & jQuery code

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Animated Label Navigation Menu</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> 
<script src="js/animate-bg.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</head>

<body>

<div id="container">
	<ul id="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>


</body>
</html>

CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	background: #f5f0e0 url(images/noise.png);
}

#container {
	height: 800px;
	background: url(images/bg.jpg) center top no-repeat;
}

ul#nav {
	width: 700px; margin: 0 auto; text-align: center; overflow: hidden;
}
	ul#nav li {
		float: left; list-style: none; 
	}
		ul#nav li a {
			display: block; width: 97px; height: 77px; 
			padding: 72px 0 0 0; margin: 0 32px 0 32px;
			font: bold 16px Helvetica, Arial, Sans-Serif; text-transform: uppercase;
			color: #9c5959; text-shadow: 0 1px 3px #c4bda6; text-decoration: none;
			
			background: url(images/label.png) 0 -149px no-repeat; 
		}
			ul#nav li a:hover {
				background: url(images/label.png) 0 0 no-repeat;
				color: #eee9d9; text-shadow: 0 2px 3px #4c2222;
			}
			
			ul#nav li a.js:hover {
				background: url(images/label.png) 0 -149px no-repeat;
			}

jQuery

$(document).ready(function() {
	$("ul#nav li a").addClass("js");
	$("ul#nav li a").hover(
      function () {
        $(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200);
        $(this).animate({backgroundPosition:"(0 -5px)"}, 150);
      }, 
      function () {
        $(this).animate({backgroundPosition:"(0 -149px)"}, 200);

      }
    );

});

The final animated menu design

View the animated menu demo

View the animated menu demo

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

47 Comments

  1. Sam says:

    I think we could do this with css3 too..

  2. Flo says:

    Since jQuery 1.4.3 you could as well use cssHooks to animate the background-position: https://github.com/brandonaaron/jquery-cssHooks

    • Dammit! Why didn't I find anything about this when I was trying to figure it out?! Thanks for the link, I'll definitely keep that in mind for any future projects.

  3. Steve Painter says:

    Looks great!

    Maybe you could integrate this with hoverIntent to ensure the animation only occurs when the mouse cursor slows over one of the list items.

    • Good idea Steve, I remember using Hover Intent on a previous project of mine, it really helps cut out the annoying activation of an effect when you pass by with the mouse.

  4. kapil says:

    I like this tutorial.

    for new comers this tutorial is very helpfull

  5. nicotroia says:

    css3 transitions — much more work for not as many benefits. thank you for using jquery

  6. Nice tutorial, very simple and nice outcome… thanks for sharing.

  7. Diogo Dantas says:

    Thanks. Nice tutorial

  8. Harry says:

    Amazingly well explained and clear, thanks!

  9. Beben Koben says:

    its a cool man, so smooth aw aw aw
    thanks for tut my bos^^
    \m/

  10. James Scott says:

    Great design and great effect. Great work!

  11. Excellent work, loved it!

  12. Lee Gustin says:

    Nice tut Chris!! Great result as well :)

  13. jojomonkey says:

    nice skillz!

    too much effort for my wee homepage, but cool demo!

  14. Badger says:

    Nice one! Thanks Chris. Love the detail on the flags.

  15. jerry says:

    Awesome tutorial, really love the simple yet detailed design. great functionality

  16. Thanks for the very detailed tutorial. I think I will test it to create a sexy header for a new project I'm working on.

  17. Leon says:

    LOVE! One of the best Animated menu I have seen.

  18. Great concept, and certainly a nice tutorial! But really, XHTML 1.0 Strict is soooooo 2008. ;)

    Use the HTML5 doctype: less typing, more future-points, and it should still trigger strict mode even in non-supporting browsers. :)

  19. Bledar Ramo says:

    Excellent effects Looks great!
    I will use it to create a beautiful menu for a new thesis project .

    thanks

  20. ahkeno says:

    Thank detail design and coding.. I love both CSS3 and Jquery! Will use on my blog soon!

  21. ABDUL JANOO says:

    Yes, I was waiting for this tutorial…
    I was thinking that Chris has forgotten Line25 blog………

  22. Markus says:

    excellent! you read my mind chris. thanx :)

  23. Truly amazing! One of the best I've seen lately. Excelent!

  24. very cool Chris, thanks!

  25. Dan Graves says:

    Hey I was wondering if anyone could help me. I am new to doing psd to html through CSS. (by new I mean first time haha)

    I tried following your tutorial with a few variations. I have been trying to tweak with the CSS but can't figure one part out. I made a logo in the center of my Nav bar and I can't get the nav text to separate and space evenly.

    Here is a link to where I am so far.

    http://graves-incorporated.com/gtest/index.html

    I am sure this is a major noob question, but this is the first time I have ever done this and would like to learn more.

    If anyone could help it would be much appreciated !!

    Thanks,
    Dan

    • adam garrett says:

      Dan,
      you could do this a number of ways.
      One would be to use pseudo-classes and set attributes for child elements. Unfortunately this doesn't work in IE without some javascript.

      Another would be to move the logo section of your psd to the far left, and then change the left margin on your ul to float right instead of left. (or vice versa)

      My only other suggestion would be to add an inner ul containing your right side menu items still within the nav ul. give it a unique id (like "nav right") and float it right within your css. like so :
      <code>
      <ul id="nav">
      <li><a href="#" class="js" style="background-position: 0px -200px; ">Home</a></li>
      <li><a href="#" class="js" style="background-position: 0px -200px; ">Services</a></li>
      <ul id="nav-right" style="float:right;"><li><a href="#" class="js" style="background-position: 0px -200px; ">Portfolio</a></li>
      <li><a href="#" class="js" style="background-position: 0px -200px; ">Contact</a></li> </ul>
      </ul>
      </code>

  26. Great tutorial saw a similar effect used well @ http://teixido.co/

    Everything included apart from the psd. Is this by choice?

  27. Phil says:

    Great tutorial. I took a look at the js and optimised the selectors, so that the code should execute quicker.

    http://jsfiddle.net/theodin/pXgLf/

  28. hp says:

    Pretty slick! Keep up the good work!

  29. Very good. tuto very good.

  30. webtrendset says:

    Its a cool animation work…
    we can utilize the functional in many ways i think so..
    Thankyou

  31. val berger says:

    this tutorial isnt just good because of its content but because of the whole way you are explaining things. great work and thank you so much for your effort :)

  32. Amran Hardan says:

    I know your site since 2 days and I like your tutorials!:D But i have a problem with JQuery. It doesn't work. Look at my version and help me please…

    http://ahwdesigns.com/tuts/index.html

  33. amirulfaiz says:

    I'm amazed by the animated menu. Very well explained tutorial. Thanks.

  34. completely awesome tutorial.

Comments are now closed