Web Designers Journal

Visions Connected To The Web

By

Elegant Nav Bars using CSS

Are you looking for some inspiration for the navigation bar of your next website project?

This tutorial explains how to design an elegant navigation bar (gettyone inspired) for your site using CSS. The result is like this:


Live preview

Step 1: Navigation bar HTML Code
HTML code is very simple: the structure is a <ul> list with a <li> element for each link in the navigation bar:

<div id=”navbar”>
<span class=”inbar”>
<ul>

<li class=”navhome”><a href=”home.html”><span>Home</span></a></li>
<li><a href=”about.html”><span>About</span></a></li>
<li><a href=”contact.html”><span>Products</span></a></li>
<li><a href=”contact.html”><span>Contact Us</span></a></li>

</ul>
</span>
</div>

How you can see, heach link <a> contains a <span> tag inside itself. I use very often this simple tips to design liquid elements with rounded corners like this:

Step 2: CSS structure
This is the CSS file structure to design the navigation bar:

#navbar{
width:auto;
height:36px;
background:url(img/navbar-bg.png) left top repeat-x; }
#navbar .inbar{
display:block;
height:36px;
background:url(img/right-round.png) right top no-repeat; }
#navbar ul, #navbar ul li{
border:0px;
margin:0px;
padding:0px;
list-style:none;
height:36px;
line-height:36px; } #navbar ul{
background:url(img/left-round.png) left top no-repeat; }
#navbar ul li{
float:left;
display:block;
line-height:36px; }
#navbar ul li a{
color:#403e32;
text-decoration:none;
font-weight:bold;
display:block; }
#navbar ul li a span{
padding:0 20px 0 0;
height:36px;
line-height:36px;
display:block;
margin-left:20px; }
#navbar .navhome a, #navbar .navhome a:hover{
background:url(img/a-bg.png) left top no-repeat;
height:36px;
line-height:36px; }
#navbar .navhome a span, #navbar .navhome a:hover span{
color:#FFFFFF;
background:url(img/span-bg.png) right top no-repeat;
height:36px;
line-height:36px; }
#navbar ul li a:hover{
background:url(img/ahover-bg.png) left top no-repeat;
height:36px;
line-height:36px; }
#navbar ul li a:hover span{
background:url(img/spanhover-bg.png) right top no-repeat;
height:36px;
line-height:36px; }

Use this navigation bar on Blogger Template
Add this link to the CSS file in the <head> tag of your template

<link href=”http://woork.bravehost.com/elegantNavbar/topbar.css” rel=”stylesheet” type=”text/css” />

…and copy and paste in a section of your template HTML code in the step 1. You have to change only the name and the URL of your link!

One Response to Elegant Nav Bars using CSS

  1. Faisal Ahmed says:

    Hello, i would like to offer my back linking services, you have a good site and i think you can get more visits if your blog was #1 on google. Good keyword + more back links = best google ranking. It is what i can do for you: 1. Xrumer 2,000-6,000 forum profile back links 2. ScrapeBox 2,000-8,000 blog comment back links 3. Bookmarking, 100-200 Social bookmarking submission 4. Article Directories submission, 400-1200 backlinks from these kind of websites 5. Blog Networks, will submit your spun articles to hundreds of private blogs. Please contact me if you are interested. Best Regards/Faisal e-mail: pr-ar( at )live .com