Creating an Animated CSS3 Horizontal Menu

March 16th, 2010 by Teylor Feliz Creating an Animated CSS3 Horizontal Menu

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.

 <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
   </ul>

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;
            }
  • See Demo

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!

Teylor Feliz is a well-known XHTML/CSS/JavaScript enthusiast from Santo Domingo, Dominican Republic. He has more than 10 years experience in the computer programming and development world, including 2 years teaching computer science. He is currently living in Louisiana, where he plans to complete his degree in Computer Science, and begin a Masters in the field.

Subscribe to our RSS
Please help us to promote this article.
  • Creating an Animated CSS3 Horizontal Menu
  • Delicious
Tags: , ,
Comments 26
  1. daniel says:
    March 16, 2010 at 11:06 am

    great!!!!

    Thank you ;)

    Reply
  2. GDevelop WebDesign says:
    March 16, 2010 at 3:15 pm

    This is not so new, but really well done.

    Thanks for this tutorial.

    Reply
  3. Kawsar says:
    March 16, 2010 at 3:18 pm

    Another great CSS3 post. Simple and useful

    Reply
  4. Andrei says:
    March 16, 2010 at 11:10 pm

    Nice work!!! I thinks can use this for my next site , Thanks !!!

    Reply
  5. JTM says:
    March 16, 2010 at 11:48 pm

    Nice, but does not work with Mac/Ffox 3.6 – Safari works.

    Reply
    • Jorde Vorstenbosch says:
      March 17, 2010 at 7:52 am

      Confirmed, doesn’t work on mac/ff but does on chrome/safari for me.

      Reply
      • Teylor Feliz says:
        March 17, 2010 at 8:02 am

        @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! :)

  6. Vikas Ghodke says:
    March 17, 2010 at 6:33 am

    Nice and simple.. Really love the final output

    Reply
  7. Brian Jones says:
    March 17, 2010 at 6:47 am

    Nice effect Teylor. Thank you for sharing!

    Reply
  8. @francAlvarez says:
    March 17, 2010 at 2:49 pm

    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!

    Reply
  9. Mihai O. says:
    March 17, 2010 at 5:40 pm

    Nice tut!

    Reply
  10. Shurandy Thode says:
    March 18, 2010 at 1:25 am

    Great one Teylor. Voted this one up! Thanks for sharing. :)

    Reply
  11. John Ryan says:
    March 24, 2010 at 3:51 pm

    Nothing like a wee bit of CSS magic to enhance a boring hyperlink. Top Job!

    Reply
  12. Zabava says:
    April 2, 2010 at 10:30 am

    Nice post thank you for sharing! :-)

    Reply
  13. diziizle says:
    April 13, 2010 at 6:24 pm

    thanks Nice post sharing!

    Reply
  14. TwitterBackgrounds says:
    July 20, 2010 at 6:23 am

    It’s a nice tutorial. Easy to follow. Thank you

    Reply
  15. broFami says:
    July 25, 2010 at 7:16 pm

    trimas 4 the tutorial.. i will try this out later

    Reply



Quantcast tag -->