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 
Download this tutorialStep 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>
</span>
</div>
<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><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>
</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:
See also this post for an explanation about how to implement a fluid rounded corners (with and height) for an HTML element.
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; }
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!
I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted.
Rome, IT.
Sponsored Links
Share this post
Comments
Subscribe to my feeds | Subscribe comments feeds
Great tutorial. Thx!
It is not valid to wrap a span around an unordered list. An unordered list is a block level element while a span is an inline element.
Just change the span to a div and everything should work fine right?
Or do you need to change the div to inline also?
I'd like to see some :active state, see navigation bar on apple.com. But hey, otherwise, great job! thanks
As Trevor noted, an inine element (such as a SPAN) cannot contain a block-level element (such as a UL) if it's going to validate against any DOCTYPE. And amarjeet, you cannot simply change the display state from inline to block either, since the SPAN element will stil be an inline element according to the HTML and XHTML DTD, and thus the unordered list inside it will still be invalid markup. The only way to correct this would be to change the SPAN to a DIV, which will also cut down on the amount of CSS needed to make the effect work. (And let's face it, less code is better code.)
It seems that it doesn't work with IE6...
Can anyone determine why this doesn't work in IE6?
I really like this but I need it to work in IE6.
Thanks!
Why not make the first, left-hand rounded corner, image the background for the li, and the second image the background for the link. Then you don't need the spans that some people are objecting to.
Please, can someone post a fix for IE6 (and IE5.5 if possible). Thank you, bless you!!
I'm not sure what's your problem specificaly, but I thinkt the span elements needs also to be floated
if you float a span, doesn't it effectively become (or behave like, at least) a block element?
For those interested in making this IE6 compatible (while retaining compatibility for all other browsers): simply change "display: block;" to "display: inline-block;" for the following elements:
#navbar ul li
#navbar ul li a
#navbar ul li a span
Good tutorial, although changing from Block to inline block won't do much... This is a good way to teach people how to make simple Navigation bars.
Thanks Ryan for the suggestion...
Changing the block to in-block makes the navbar work in IE6..
Cheers
FISA
When you start off... "Home" is highlighted dark grey...but once you click on other buttons...the highlight stays on home...doesnt not move to the next one clicked...
What am I missing ?
I Think I figured it out...
You have to keep moving
li class="navhome"
down the list for each link.
Thanks!
how do you get the under pop down effect when one hovers over the navigation menu ,like the one in getty images http://www.gettyimages.com/
Thanks! I've been struggling with how to create a navbar for my parents site, as I've never done it before. Hopefully this will help!
wow. great.. thanks