Create a Slick Menu using CSS3

In this article I am trying to mimic the navigation menu in Dragon Interactive website using only CSS (no images, no JavaScript).
Note: This is an experimental example using the new features of CSS3. The effects can be seen in Latest Webkit Browser only. Gradients works in Firefox 3.6 but not the fade-in and fade-out transition.


Here is the demo of what we are about to create.

LIVE DEMO

Lets create the html used.

1. <div class="wrapper">  
2. <div class="container"><ul class="menu" rel="sam1">  
3. <li class="active"><a href="#">Home</a></li>  
4. <li><a href="#">About</a></li>  
5. <li ><a href="#">Blog</a></li>  
6. <li><a href="#">Services</a></li>  
7. <li><a href="#">Portfolio</a></li>  
8. <li><a href="#">Contacts</a></li>  
9. <li><a href="#">Twitter @insic</a></li>  
10. </ul>  
11. </div>  
12. </div>  

Now the CSS.
Lets add a gradients using CSS3 gradient property into our wrapper div.

view plaincopy to clipboardprint?

1. .wrapper {  
2.     width: 100%;  
3.     height: 80px;  
4.     background : #464646;  
5.     background : -webkit-gradient(linear, left top, left bottombottom, from(rgb(168,168,168)), to(rgb(69,69,69)));  
6.     background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));  
7.     border-top: 2px solid #939393;  
8.     position: relative;  
9.     margin-bottom: 30px;  
10. }  

The CSS code for the menu item.

view plaincopy to clipboardprint?

1. ul {  
2.     margin: 0;  
3.     padding: 0;  
4. }  
5.   
6. ul.menu {  
7.     height: 80px;  
8.     border-left: 1px solid rgba(0,0,0,0.3);  
9.     border-right: 1px solid rgba(255,255,255,0.3);  
10.     float:left;  
11. }  
12.   
13. ul.menu li {  
14.     list-style: none;  
15.     float:left;  
16.     height: 79px;  
17.     text-align: center;  
18.     background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );  
19.     background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);  
20.     }  
21.   
22. ul li a {  
23.     display: block;  
24.     padding: 0 20px;  
25.     border-left: 1px solid rgba(255,255,255,0.1);  
26.     border-right: 1px solid rgba(0,0,0,0.1);  
27.     text-align: center;  
28.     line-height: 79px;  
29.     background : -webkit-gradient(linear, left top, left bottombottom, from(rgb(168,168,168)), to(rgb(69,69,69)));  
30.     background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));  
31.     -webkit-transition-property: background;  
32.     -webkit-transition-duration: 700ms;  
33.     -moz-transition-property: background;  
34.     -moz-transition-duration: 700ms;  
35.     }  
36.   
37. ul li a:hover {  
38.     background: transparent none;  
39. }  
40.   
41. ul li.active a{  
42.     background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );  
43.     background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);  
44. }  

LIVE DEMO