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.

 

email

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *

Web Design Quote | Web Design Estimate
Categories

Related Post

Archives
June 2017
S M T W T F S
« May    
 123
45678910
11121314151617
18192021222324
252627282930  
Pond Calculator

Select Pond Shape

Powered by Pond Supplies for Less

Our Calculator Estimates The Following Size For Your Pond Liner:

Pond Volume: 0 US Gallons | Liters: 0 | Imperial Gallons: 0

Estimated Pond Liner Size: 0 X 0 Feet

Note: Pond liner size estimate includes a 1 foot overlap on all sides.

Powered by Pond Supplies For Less