How To Create a Cool Animated Menu with jQuery
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.
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
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
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
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.
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.
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
View the animated menu demo
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
I think we could do this with css3 too..
Absolutely! It would probably get more cool points being created in CSS3, maybe not so widely supported though.
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.
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.
Think one of you could talk about / explain how to incorporate HoverIntent into this as well?
I like this tutorial.
for new comers this tutorial is very helpfull
Thanks Kapil, helping new comers is always my aim with these tuts. Hopefully they come in handy for experienced designers too.
css3 transitions — much more work for not as many benefits. thank you for using jquery
I do enjoy CSS3 transitions, but until they’re a little more widely supported I’m enjoying increasing my jQuery knowledge!
how are they much more work?
Nice tutorial, very simple and nice outcome… thanks for sharing.
Thanks. Nice tutorial
Amazingly well explained and clear, thanks!
its a cool man, so smooth aw aw aw
thanks for tut my bos^^
\m/
Great design and great effect. Great work!
Excellent work, loved it!
Nice tut Chris!! Great result as well :)
nice skillz!
too much effort for my wee homepage, but cool demo!
Nice one! Thanks Chris. Love the detail on the flags.
Awesome tutorial, really love the simple yet detailed design. great functionality
great tutorial!
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.
LOVE! One of the best Animated menu I have seen.
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. :)
Excellent effects Looks great!
I will use it to create a beautiful menu for a new thesis project .
thanks
Thank detail design and coding.. I love both CSS3 and Jquery! Will use on my blog soon!
Yes, I was waiting for this tutorial…
I was thinking that Chris has forgotten Line25 blog………
excellent! you read my mind chris. thanx :)
Truly amazing! One of the best I’ve seen lately. Excelent!
very cool Chris, thanks!
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