Great CSS Menu Tutorials

Navigation is such an important part of your website. It’s how your visitors navigate to the main areas of your site and makes it easy for them to find your good content.

CSS is of course the perfect language for designing beautiful navigation menus. It can be applied to any type of website and is very flexible. Don’t be alarmed if your own CSS skills are fairly limited as there are a lot of great tutorials out there that walk you through how to add clean and professional looking CSS menus to your website. You can either copy and paste the code into your own design or modify the menu to suit your needs.

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.

1. .wrapper {
2.     width: 100%;
3.     height: 80px;
4.     background : #464646;
5.     background : -webkit-gradient(linear, left top, left bottom, 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.

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 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. }

CSS3 Animated Navigation Menu

« Read and download on Tutorialzine

• Home
• News
• About us
• Services
• Contact us

Looks best in Firefox 4, usable everywhere.

-->