Creating an Animated CSS3 Horizontal Menu
March 16th, 2010 by Tweet
Inspired by CSS Sprites2 – It’s JavaScript Time from A List Apart and Using jQuery for Background Image Animations written over a year ago, I decided to create a short tutorial about a animated menu just using CSS3. In fact, I am using the same principle of moving the background image from one position to another, in this case from left to right, the only difference is that I am using the CSS3 property transition to create the animations. This shows us how powerful CSS3 can be and how we can save some JavaScript code to achieve the same result. As you know, right know the transition property is only supported by Safari and Chrome.
HTML Structure
First, we create an unordered list with “menu” as id, in which we create 5 items containing links that would be enough for this tutorial.
Background Image
The background image to use in the animation is this one.
Styling with CSS
Adding the style to create the menu and its animation. The CSS3 property used is transition.
#menu li {
display: inline;
list-style: none;
padding: 0;
}
#menu li a {
border: 1px solid white;
padding: 15px 20px 15px 20px;
text-decoration: none;
color:black;
margin-left: -5px;
/* This is the background used for the animation */
background-image: url('image.jpg');
/* Align the background image position to the left of the link */
background-position: left;
-webkit-transition: all 0.8s ease-in-out;
/* Animation with transition in Firefox (No supported Yet) */
-moz-transition: all 0.8s ease-in-out;
/* Animation with transition in Opera (No supported Yet)*/
-o-transition: all 0.8s ease-in-out;
}
With the mouse over we complete the transition effect in CSS3. The menu items will change their properties in 0.8 seconds.
#menu li a:hover {
color: white;
/* Align the background image position of the background to the right*/
background-position:right;
}
220-701 braindumps are your best helper. Learn with 640-822 brain dumps what you really need to learn for your 642-812 certification exam. The braindumps offer you 100% guranteed success on first attempt!
Try once our warm exam product like 70-293 study guide, 1Y0-A18 dumps, 70-515 questions and answers product, 642-384 braindumps, and 000-104 dumps which will definitely prove helpful tool.
Teylor Feliz is a well-known XHTML/CSS/JavaScript enthusiast from Dominican Republic. He has more than 10 years experience in the computer programming, graphic design, and web development world, including 2 years teaching computer science. Teylor has a degree in Applied Sciences from the University of Louisiana and is completing a Master’s degree in IT with a concentration in Web Design and Development, at the University of Denver.
Subscribe to our RSS
Please help us to promote this article.
#1 Rated Cloud Server Hosting Provider
Recommended
A Leading B2B platform with 10 years history. Compare & Inquire with Trusted China Suppliers (SGS certified). Log on & Order now! 
What hosting plan offers more - InMotion Hosting or iPage? What about FatCow? Compare all at BestWebHostingFans.com.
great!!!!
Thank you
You are welcome
This is not so new, but really well done.
Thanks for this tutorial.
Thanks for the comment! Come back soon!
Another great CSS3 post. Simple and useful
As Always, Thanks! I appreciate your feedback
Nice work!!! I thinks can use this for my next site , Thanks !!!
Great! Glad you can will put it to use!
Nice, but does not work with Mac/Ffox 3.6 – Safari works.
Confirmed, doesn’t work on mac/ff but does on chrome/safari for me.
@JTM and @Jorde Vorstenbosch Obviously, you two did not read the introduction I wrote.
I clearly mentioned, “As you know, right know the transition property is only supported by Safari and Chrome.” Hopefully it will be compatiable with fire Fox in the future though! 
Nice and simple.. Really love the final output
Simple is always good!
Nice effect Teylor. Thank you for sharing!
Thanks! glad you liked it! Thanks for the comment!
Wow, it’s a nice effect!, The only thing wrong is that IE does not work, and the worst is that most people still have IE, a large percentage …
I use Firefox and Chrome!
Nice tut!
Great one Teylor. Voted this one up! Thanks for sharing.
Thanks you!!!
Nothing like a wee bit of CSS magic to enhance a boring hyperlink. Top Job!
Thanks for your comment!
Nice post thank you for sharing!
thanks Nice post sharing!
Thanks! I hope you found it useful!
It’s a nice tutorial. Easy to follow. Thank you
trimas 4 the tutorial.. i will try this out later
This shows us how powerful CSS3 can be and how we can save some JavaScript code to achieve the same result
Yes! I agree! Glad you liked it! Come back soon!
teşekkürler css yapmayı yeni öğreniyorum güzel bir kaynak
I always try to use CSS for my menus. I find it makes for faster load times. This was a great tutorial. Thanks!
please send me some tutorial about css3 and jquery in *.pdf format to my email. this is very nice tutorial but i am is newbie about it.
Hi Thanks for this but this is not working in IE- 6 please help me how it will work in IE-6
Sorry but IE6 must DIE!, this is CSS3 which is not supported by this browser.
Thank for your comment.
Love the menu. Thanks for showing how to do it so easily!
Nice example for creating animated horizontal menu.