Create a Cool Animated CSS3 Menu without using Images and JavaScript

In this tutorial, we’ll discuss some new features and properties of CSS3. Here you will learn how to create a cool rounded navigation menu, with no images and no JavaScript, and effectively make use of the new CSS3 properties border-radius and animation. Just follow the easy steps to create cool animated CSS3 menus.

 

Live Demo   Download Script

Step 1: The HTML structure of the Menus

The basic HTML structure of the menu has three list items with the names “Menu1“, “Menu2” and “Menu3“.

  1. <div class=“css3Menus”>  
  2. <ul>  
  3.     <li>Menu1</li>  
  4.     <li>Menu2</li>  
  5.     <li>Menu3</li>  
  6. </ul>  
  7. </div>  

 

Step 2: Set the Background Color of the Menu

In this step we’ll give the main navigation area a dark background. The width, height and padding are completely optional; they are only there for demonstration purposes when viewing the demo.

  1. .css3Menus {  
  2. background#14080a;  
  3. width:506px;  
  4. height:260px;  
  5. padding:20px;  
  6. }  

The Menus looks like below:

 

Step 3: Make Round Navigation with border-radius

In this step we’ll make each item (.li) rounded with some cool CSS3 property, more specifically with the border-radius property:

  1. ul {  
  2. list-stylenone;  
  3. }  
  4.   
  5. li {  
  6. float:left;  
  7. font14px/10px ArialVerdanasans-serif;  
  8. color:#FFF;  
  9. background-color:#CCCC00;  
  10. width80px;  
  11. height80px;  
  12. padding:20px;  
  13. margin:0 30px 0 0;  
  14. -webkit-border-radius: 60px;  
  15. -moz-border-radius: 60px;  
  16. border-radius: 60px;  
  17. }  

The Menu looks like below:

 

Step 4: Set Alignment of Menus

In this step, we’ll give each item (.li) a unique background-color and position:

  1. li#menu1 {  
  2. background-color#00FFCC;  
  3. }  
  4. li#menu2 {  
  5. background-color#CC9900;  
  6. margin-top:100px;  
  7. }  
  8. li#menu3 {  
  9. background-color#33FF66;  
  10. margin-top:50px;  
  11. }  

Now the Menu looks like below:

Step 5: Set Alignment of Links within the Menus

  1. li a {  
  2. color:#FFF;  
  3. text-decoration:none;  
  4. display:block;  
  5. width80px;  
  6. height45pxtext-aligncenter;  
  7. padding:35px 0 0 0;  
  8. margin:0 40px 0 0;  
  9. -webkit-border-radius: 40px;  
  10. -moz-border-radius: 40px;  
  11. border-radius: 40px;  
  12. }  
  13. li#menu1 a {  
  14. background-color#FF0000;  
  15. }  
  16. li#menu2 a {  
  17. background-color#660033;  
  18. }  
  19. li#menu3 a {  
  20. background-color#66CCCC;  
  21. }  

The menus look like below after links alignment:

 

Step 6: Define the Properties for the Hover Effect

You can add hover effect for the “inner core” of our navigation for a good user experience.

  1. li a:hover,  
  2. li a:focus,  
  3. li a:active {  
  4. width120px;  
  5. height:65px;  
  6. padding:55px 0 0 0;  
  7. margin:-20px 0 0 -20px;  
  8. -webkit-border-radius: 60px;  
  9. -moz-border-radius: 60px;  
  10. border-radius: 60px;  
  11. }  

The menus looks like below after hover effect:

 

Step 7: Finally adding the animation to the Navigation

Now in this final step, we’ll add animation property to menus.

  1. li a:hover,  
  2. li a:focus,  
  3. li a:active {  
  4. -webkit-animation-name:bounce;  
  5. -webkit-animation-duration:1s;  
  6. -webkit-animation-iteration-count:4;  
  7. -webkit-animation-direction:alternate;  
  8. }  
  9. @-webkit-keyframes bounce{from{margin:0 40px 0 0;}  
  10. to{margin:120px 40px 0 0;}  
  11. }  

The menus look like below after adding animation:

 

Conclusion

In above tutorial you have learned how to build cool animated menus without using JavaScript and images just used some really cool css3 properties. The menus work perfectly well with Chrome and Safari. With Firefox the border-radius works great but not the animation.

 

About the Author: Laeeq

A web developer who has a love for creativity and enjoys experimenting with various techniques in both web design and development. If you would like to be kept up to date with our posts, you can follow us on Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.

More posts like this

Leave a comment

(You can, of course, unsubscribe at anytime).