/CSS/ Create a navigation bar

17/05/2007 | Filed under Develop > CSS

Follow Craig Grannell through the process of generating a horizontal, two-tier navigation bar that you can use as the basis for navigation on as many websites as you like

The subject of this issue’s tutorial is a horizontal, two-tier navigation bar, using HTML divs and lists for structure and CSS for styles. This can be used on various sites with just a few CSS rule changes and image swaps, all of which dramatically alter its look but not its actual structure. I’ll also show you how to automate the active tab on a web page by way of class and id values, along with a couple of CSS rules (one for the default state and one for the hover state).

About the author:

Name: Graig Grannell
Site: www.snubcommunications.com
Areas of expertise: Information architecture, site concepts, graphics, interface and front-end design
Clients: Swim~, Rebellion, IDG
Favourite gig: Sigur Ros, Hammersmith Apollo, 2006

Click here to download the support files
Click here to download tutorial PDF

Comments

Adam / 19/05/2007 / 20:05 / http:www.cubixstudios.net

This is interesting, do you have any articles on css dropdowns?

Craig / 30/05/2007 / 12:49

FWIW, a reader unearthed another hasLayout issue, so you should add the following to the ie-hacks.css file: #subNavigation {height: 1%;}

As for drop-downs, I've not personally done anything on that for .net yet, but other writers may have.

koozehchian / 31/05/2007 / 08:18 / http://www.freedownload.ir

good tutorial.
please write tutorial about Css and Xhtml too more.

Daniel / 06/06/2007 / 17:15 / http://www.delectat.de

Good and useful summary, but nothing really new ;-)

@Adam
take a look at Suckerfish CSS Dropdown tutorial

Steven Wilson / 07/06/2007 / 09:41 / http://www.ark-rep.com

@ Adam...

This is the bare bones of a css drop down... It works fine without the javascript on all browsers expect IE .. go frigure

#Naviagtion { }

#Naviagtion ul { margin:0px; padding:0px; }

#Naviagtion a { margin:0 0.5em;}

#Naviagtion li { float:left; display:inline; }

#Naviagtion li ul { position:absolute; left:-999em; }

#Naviagtion li ul li { margin:0px; padding:0px;}

#Naviagtion li ul li a { }

#Naviagtion a:link, #Naviagtion a:visited { color:#ccc; }

#Naviagtion a:hover { color: #900; }

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */ left:auto; margin:0px; }

<![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]>

Alan Davies / 20/06/2007 / 14:56

Finding a JS-free implementation of a CSS-dropdown menu has been a bit of a Holy Grail quest for many of us. Try http://www.grc.com/menu2/invitro.htm for an amazing bit of work. Works in IE5.5 and above. There is no JS at all and no weird access variable hacks. However, there are a few conditionals, but nothing to upset a JS-free browser. The code (free to use) is quite easy to customize. The dropdowns are hierarchic, with a number of expanding levels.

Jen / 01/07/2007 / 03:35 / http://www.freebiescout.com/ps3guide.html

Before I go delving into this, can anyone (not a bot) tell me if it is worth reading? I'm just learning CSS (thanks to Eric Meyer's book) but I find web resources are great. However, there's just so much out there that it takes a while to find the good stuff.

Lyndon Antcliff / 13/10/2007 / 18:20 / http://www.dobadob.com

Yeah it's good for a beginner, you have to start somewhere.

TMaxim / 17/10/2007 / 13:33 / http://www.faberlica.com

I recomend you the book "CSS Mastery: Advanced Web Standards Solutions" by Andy Budd, Cameron Moll, Simon Collison

Wang A. / 24/05/2008 / 20:23 / http://www.designbits.de

Looks very promising for CSS newbies like me. Thanks!

Maximilian / 30/05/2008 / 17:07 / http://www.filzschuhe-filzpantoffeln.de

It should work without the javascript on on Firefox and IE.
Otherwise is better to use a simple navigation.

Kenneth Jaysone / 06/06/2008 / 13:02 / http://www.arenabadminton.com.my

Hi Craig, awesome tutorial, i just have one question.

The slightly awkward-looking height and width values for #logo (132px and 437px, respectively) are required to move the logo into place, so that the gradient behind it matches with the mastheads (see also #logo img later on).

How do you know the exact measurements of the width and the height needed for the #logo div? The image of the logo has a width of 402 px and a height of 92px.

I'm guessing that the this page mockup was done in photoshop and there were guides used and that's how one would know the exact measurements of the logo and how much width and height it needs to allign the background of the logo with the background of the #masthead image.

I'm sorry if my question is stupid, i'm a newbie.

.net /develop/discover/design

/CSS/ Create a navigation bar

Comments

Add a comment

Issue 179

ADVERTISEMENT FEATURE

Let your creativity fly

Quick Links