Stylish navigation bar using CSS
This tutorial explains how to design a Stylish navigation bar using CSS with rounded corners for links.
The result is something like this:
Step 1: HTML page
Create a new HTML page and copy and paste the following code inside <body> tag:
<div id="MainMenu">
<div id="tab">
<ul>
<li class="item_active"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul>
</div>
</div>
Step 2: rounded corners with liquid design for links:
Before to start, I spend few rows to explain how to implement this simple effect using CSS. The typical way is using this simple structure:
<a href="#"><span>About</span></a>
Step 3: CSS file, #MainMenu :
Create a new CSS file (style.css) and copy and paste the following code for #MainMenu element .
#MainMenu
{
height:37px;
background: #FFFFFF;
margin:0;
border:0;
}
Step 4: CSS file, #tab
Create a new CSS file (style.css) and copy and paste the following code for #tab element (remeber to link this file in your HTML page):
#tab
{
margin:0;
top:0;
}
#tab ul
{
margin:0;
padding:0;
list-style:none;
float:left;
}
#tab li
{
display:inline;
float:left;
margin:0;
padding:0;
}
#tab a
{
background: url("images/bright_109.gif") no-repeat right top;
margin:0;
padding:0;
text-decoration:none;
border:0;
display:block;
float:left;
}
#tab a span
{
display:block;
background:url("images/bleft_109.gif") no-repeat left top;
padding:0 25px 0 25px;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#FFFFFF;
font-weight:bold;
line-height:37px;
}
#tab a:hover,#tab li.item_active a
{
background-position:right bottom;
border-color:;
}
#tab a:hover span,#tab li.item_active a span
{
background-position:left bottom;
color:#000000;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
Save and test the result!
Download this tutorial