This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Thursday, February 28, 2008

Elegant navigation bar 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 Download this tutorial

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:


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


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!

blog comments powered by Disqus
Katalog Stron said...

Great tutorial. Thx!

Trevor said...

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.

Amarjeet said...

Just change the span to a div and everything should work fine right?

Or do you need to change the div to inline also?

wzajac said...

I'd like to see some :active state, see navigation bar on apple.com. But hey, otherwise, great job! thanks

Dan Schulz said...

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

Lionel said...

It seems that it doesn't work with IE6...

Handyman wanna be said...

Can anyone determine why this doesn't work in IE6?

I really like this but I need it to work in IE6.

Thanks!

dr john said...

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.

Nathan said...

Please, can someone post a fix for IE6 (and IE5.5 if possible). Thank you, bless you!!

Jakub Chodorowicz said...

I'm not sure what's your problem specificaly, but I thinkt the span elements needs also to be floated

nikflorida said...

if you float a span, doesn't it effectively become (or behave like, at least) a block element?

Ryan said...

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

Trevor said...

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.

Anonymous said...

Thanks Ryan for the suggestion...
Changing the block to in-block makes the navbar work in IE6..

Cheers

FISA

FISA said...

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 ?

FISA said...

I Think I figured it out...
You have to keep moving
li class="navhome"
down the list for each link.

Thanks!

sreenidhi said...

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/

JoyousTreasures said...

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!

FLiTz said...

wow. great.. thanks

awestensee said...

Is there an easy way to have the links automatically centered no matter how wide the nav bar is?

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News