How To Create a Cool Animated Menu with jQuery

spacer

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.

spacer

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

spacer

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.

spacer

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.

spacer

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.

spacer

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.

spacer

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.

spacer

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

spacer

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

spacer

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.

spacer

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%.

spacer

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.

spacer

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

spacer

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

spacer

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

spacer

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.

spacer

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

spacer

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.

spacer

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.

spacer

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" "www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Animated Label Navigation Menu</title>

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

<script src="/img/spacer.gif"> 

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 {
	px;
	"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

spacer

View the animated menu demo

  • Tweet
spacer
Written by Chris Spooner

Chris Spooner is a designer who has a love for creativity and enjoys experimenting with various techniques in both print and web. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

More posts like this

  • Create a Stylish Contact Form with HTML5 & CSS3
  • How To Build a Sliding Feature Slideshow with jQuery
  • CSS Basics: How to Design & Code a Stylish Button
  • Create a Dark Navigation Menu Design with CSS
  • Code a Stylish Portfolio Site Design in HTML & CSS
  • Coding Up a Web Design Concept into HTML & CSS

47 Comments

  1. spacer Sam says:
    January 24, 2011 at 11:54 am

    I think we could do this with css3 too..

    • spacer Chris Spooner says:
      January 25, 2011 at 9:08 am

      Absolutely! It would probably get more cool points being created in CSS3, maybe not so widely supported though.

  2. spacer Flo says:
    January 24, 2011 at 1:29 pm

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

    • spacer Chris Spooner says:
      January 25, 2011 at 9:09 am

      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. spacer Steve Painter says:
    January 24, 2011 at 4:04 pm

    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.

    • spacer Chris Spooner says:
      January 25, 2011 at 9:11 am

      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.

      • spacer vikter says:
        January 31, 2011 at 6:17 am

        Think one of you could talk about / explain how to incorporate HoverIntent into this as well?

  4. spacer kapil says:
    January 24, 2011 at 4:24 pm

    I like this tutorial.

    for new comers this tutorial is very helpfull

    • spacer Chris Spooner says:
      January 25, 2011 at 9:12 am

      Thanks Kapil, helping new comers is always my aim with these tuts. Hopefully they come in handy for experienced designers too.

  5. spacer nicotroia says:
    January 24, 2011 at 5:20 pm

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

    • spacer Chris Spooner says:
      January 25, 2011 at 9:14 am

      I do enjoy CSS3 transitions, but until they’re a little more widely supported I’m enjoying increasing my jQuery knowledge!

    • spacer jack says:
      January 25, 2011 at 8:11 pm

      how are they much more work?

  6. spacer Web Design Hull says:
    January 24, 2011 at 6:00 pm

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

  7. spacer Diogo Dantas says:
    January 24, 2011 at 6:25 pm

    Thanks. Nice tutorial

  8. spacer Harry says:
    January 24, 2011 at 6:56 pm

    Amazingly well explained and clear, thanks!

  9. spacer Beben Koben says:
    January 24, 2011 at 9:42 pm

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

  10. spacer James Scott says:
    January 25, 2011 at 1:00 am

    Great design and great effect. Great work!

  11. spacer Arie Zonshine says:
    January 25, 2011 at 1:18 am

    Excellent work, loved it!

  12. spacer Lee Gustin says:
    January 25, 2011 at 2:40 am

    Nice tut Chris!! Great result as well :)

  13. spacer jojomonkey says:
    January 25, 2011 at 3:58 am

    nice skillz!

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

  14. spacer Badger says:
    January 25, 2011 at 12:08 pm

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

  15. spacer jerry says:
    January 25, 2011 at 12:08 pm

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

  16. spacer Marty McColgan says:
    January 25, 2011 at 12:11 pm

    great tutorial!

  17. spacer Nicolas Chevallier says:
    January 25, 2011 at 5:37 pm

    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.

  18. spacer Leon says:
    January 25, 2011 at 7:33 pm

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

  19. spacer Matt Patenaude says:
    January 25, 2011 at 7:34 pm

    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. :)

  20. spacer Bledar Ramo says:
    January 25, 2011 at 9:55 pm

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

    thanks

  21. spacer ahkeno says:
    January 26, 2011 at 2:35 am

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

  22. spacer ABDUL JANOO says:
    January 26, 2011 at 6:26 am

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

  23. spacer Markus says:
    January 26, 2011 at 7:44 am

    excellent! you read my mind chris. thanx :)

  24. spacer Franklin Vasquez (Frajax) says:
    January 26, 2011 at 5:31 pm

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

  25. spacer Louis Gubitosi says:
    January 26, 2011 at 9:10 pm

    very cool Chris, thanks!

  26. spacer Dan Graves says:
    January 27, 2011 at 3:11 am

    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.

    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

gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.