in Design

How To Make a CSS3 Top Navigation Menu

Today we are going to make a CSS3 top navigation menu . We made this navigation menu without javascript or any image, we just used CSS properties.

So starting with the basic HTML code, we need to insert HTML code into the menu. We have used simple unordered lists.Its really easy to insert any page, post or category in the menu, we used a simple code.

Screenshot with the final result:

Demo: click here

<li>
<a href='#home'>HOME</a>
</li>

Just change the url and title insert it into the Html code.

Html code

<ul id='nav'>
 
<li>
<a href='#home'>HOME</a>
</li>
 
<li>
<a href='#tutorials'>TUTORIALS</a>
</li>
 
<li>
<a href='#resources'>RESOURCES</a>
</li>
 
<li>
<a href='#inspiration'>INSPIRATION</a>
</li>
 
<li>
<a href='#downloads'>DOWNLOADS</a>
</li>
 
<li>
<a href='#wordpress'>WORDPRESS</a>
</li>
 
<li>
<a href='#contact-us'>CONTACT-US</a>
</li>
 
<li>
<a href='#advertise'>ADVERTISE</a>
</li>
 
</ul>

CSS Code

Creating the CSS code is consists of 3 parts :- Structural, Design and hover effect. We have choosed two basic red colors for our design. You can change the colors and try something that suits your style.

Structuring the CSS code

#nav {
 
margin: 0 0 0px 0px;
background: -moz-linear-gradient(bottom, #8a0a09,#ee0000);
background: -webkit-gradient(linear, center bottom, center top, from(#8a0a09), to(#ee0000));
background-color: #d10d0d;
 
}
 
#nav, #nav ul {
 
padding: 0;
float: left;
list-style: none;
 
}

Making your menu look better

#nav {
 
padding: 0;
font-size: 14px;
float: left;
width: 1050px;
border-top: 2px solid #ee0000;border-bottom: 2px solid #8a0a09;
font-family: arial;
 
}
 
#nav a {
 
color: #ffffff;
font-weight: bold;
display: block;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
border-right:0px solid #DDD;
 
}
 
#nav li {
 
color:#666666;
float: left;
line-height: 30px;
 
}

Adding hover effects

#nav li a:hover {
 
color:#8a0a09 ;
 
text-decoration: none;
 
font-weight:none;
 
background: white;
 
-moz-border-radius-topleft: 14px;
 
-moz-border-radius-topright: 0px;
 
-moz-border-radius-bottomright: 14px;
 
-moz-border-radius-bottomleft: 0px;
 
-webkit-border-top-left-radius: 14px;
 
-webkit-border-top-right-radius: 0px;
 
-webkit-border-bottom-left-radius: 0px;
 
-webkit-border-bottom-right-radius: 14px;
 
border-top-left-radius: 14px 14px;
 
border-top-right-radius: 0px 0px;
 
border-bottom-left-radius: 0px 0px;
 
border-bottom-right-radius: 14px 14px;
 
}
 
#nav li ul {
 
position: absolute; backgound: #000000;
 
width: 15em;
 
left: -999em;
 
z-index: 99999;
 
}
 
#nav li:hover ul, #nav li.sfhover ul {
 
left: auto;
 
z-index: 1000;
 
}
 
#nav li ul li {
 
background: #8a0a09;
 
border-bottom: 1px solid #ffffff; border-top: #d10d0d;
 
border-left: 1px solid #ffffff;
 
border-right: 1px solid #ffffff;
 
line-height: 28px;
 
width: 15em;
 
}
 
#nav li:hover, #nav li.hover {
 
position: static;
 
}
 
#nav li ul ul {
 
margin: -29px 0 0 15em;
 
}
 
#nav li:hover ul ul, #nav li.sfhover ul ul {
 
left: -999em;
 
}
 
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
 
left: auto;
 
}
 
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
 
left: -999em;
 
}
 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
 
left: auto;
 
}

Author Bio:

Ramandeep Singh is the founder of Design Rapid , a design blog where he writes inspirational articles and tutorials about web design. You can find on him Twitter @raman2572.

Ramandeep Singh

Ramandeep Singh is the founder of Design Rapid , a design blog where he writes inspirational articles and tutorials about web design. You can find on him Twitter @raman2572.

Leave a Reply