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:

    great!!!!

    Thank you ;)

  2. This is not so new, but really well done.

    Thanks for this tutorial.

  3. Kawsar says:

    Another great CSS3 post. Simple and useful

  4. Andrei says:

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

  5. JTM says:

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

    • Jorde Vorstenbosch says:

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

      • Teylor Feliz says:

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

    Nice and simple.. Really love the final output

  7. Brian Jones says:

    Nice effect Teylor. Thank you for sharing!

  8. 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!

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

  10. John Ryan says:

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

  11. Zabava says:

    Nice post thank you for sharing! :-)

  12. diziizle says:

    thanks Nice post sharing!

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

  14. broFami says:

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



Quantcast tag -->