In this article we are 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.
Lets create the html used.
01 <div class="wrapper">
02 <div class="container"><ul class="menu" rel="sam1">
03 <li class="active"><a href="#">Home</a></li>
04 <li><a href="#">About</a></li>
05 <li ><a href="#">Blog</a></li>
06 <li><a href="#">Services</a></li>
07 <li><a href="#">Portfolio</a></li>
08 <li><a href="#">Contacts</a></li>
09 <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.
01 .wrapper {
02 width: 100%;
03 height: 80px;
04 background : #464646;
05 background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
06 background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
07 border-top: 2px solid #939393;
08 position: relative;
09 margin-bottom: 30px;
10 }
The CSS code for the menu item.
01 ul {
02 margin: 0;
03 padding: 0;
04 }
05
06 ul.menu {
07 height: 80px;
08 border-left: 1px solid rgba(0,0,0,0.3);
09 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 bottom, 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 }
Автор: insic |
