<\/p>\n<\/p>\n
Navigation bars are the signposts of the web world: we take them for granted because of their ubiquity, but we\u2019d all have a much harder time getting around without them. On most websites, nav bars hold a position of honor near the very top of the page, meaning they\u2019re one of the first things your users see upon entering your site. As such, there\u2019s a lot of pressure on navigation bars to look clean, act sophisticated, and ply the client\u2019s wife with small talk and Manhattans while you close the deal.<\/p>\n
Because of all that pressure, a lot of designers turn to the Tools of Yesteryear to ensure their navigation looks exactly the way they expect it to. Table cells, flash buttons, images, and (shudder) image maps make far too common an appearance at the top of otherwise respectable websites.<\/p>\n
But you don\u2019t need all that! Here\u2019s a simple tutorial on how to create a perfectly respectable tabbed navigation bar with clean, happy XHTML and a few lines of CSS. I\u2019m using tabs because I\u2019m fond of them, but you could adapt these techniques to create whatever sort of navigation you\u2019d like.<\/p>\n
We\u2019ll start with an unordered list, like so:<\/p>\n
<ul id=\"nav\">\n\t<li><a href=\"\/about\/\">About Us<\/a><\/li>\n\t<li><a href=\"\/contact\/\">Contact Us<\/a><\/li>\n\t<li><a href=\"\/archives\/\">Our Archives<\/a><\/li>\n\t<li><a href=\"\/free\/\">Free Stuff<\/a><\/li>\n<\/ul><\/pre>\nWhy an unordered list? Well, because when you get right down to it, what is a nav bar but a list of links, given in no semantically vital order? Nothing, I tell you. Nothing. Once we have our list, we have a page that looks something like this.<\/a> I\u2019ve applied a couple other styles to my body tag (moved the text away from the edges, set a font family, and given my page a top border), but as you can see, our navigation list is Plain Jane.<\/p>\nThe next thing we\u2019ll need to do is move our navigation to where we want it. I want my tabs to look like they\u2019re coming out of that border I\u2019ve applied to the body, so let\u2019s move the list to the top right corner:<\/p>\n
ul#nav {\n\tposition: absolute;\n\ttop: 10px;\n\tright: 0; }<\/pre>\nThe \u201cposition: absolute;\u201d rule pulls our list out of the normal flow of the document so that we can put it wherever we want. I then use a couple of other rules to move it 10 pixels from the top (i.e., the width of my border) and place it right along the right side of the page. If you wanted your navigation on the left, a rule of \u201cleft: 0;\u201d would do the trick. <\/p>\n
But our list still looks like a list<\/a> (in everything but IE), and we can\u2019t have that. The first step along the road to total list domination is to remove the margins, padding, and bullets that make our list so list-like. We\u2019ll append our previous rule, so it now reads thusly:<\/p>\nul#nav {\n\tposition: absolute;\n\ttop: 10px;\n\tright: 0;\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0; }<\/pre>\nThis is fairly straightforward: the \u201clist-style\u201d rule removes the bullets from our list, and then we set our margins and padding to zero to make the list fit snug against our top border, as you can see here.<\/a><\/p>\nNext up, we\u2019ll put our list items in a single horizontal row. This is accomplished with a single rule:<\/p>\n
ul#nav li {\n\tfloat: left; }<\/pre>\nAs you can see,<\/a> our list items are now arranged horizontally. Now let\u2019s use some CSS magic to make them look a little more like tabs:<\/p>\nul#nav li a {\n\tdisplay: inline;\n\tfloat: left;\n\tpadding: 8px 5px 3px 5px;\n\tmargin-right: 5px;\n\tbackground-color: #034a7f; }<\/pre>\nWe\u2019re modifying the anchor tag here instead of the <li> tag for one primary reason: we want the entire tab to act as a link, not just the text portion. By applying our padding and background color to the anchor tag instead of the list item, we make our entire tab clickable. You can see the effect here. <\/a><\/p>\nOh, and that bit at the top about displaying inline and floating left? Well, that\u2019s what we in the biz like to call a \u201chack.\u201d The two rules are working together to accomplish a single task: to make Internet Explorer 6 play nicely. The \u201cfloat: left\u201d property reminds IE6 that we want our clickable area to take up all the space we\u2019ve given it, not just the text part \u2013 without this statement, only the text (and not the whole tab) is clickable in IE. But floating the links also introduces some weird spacing problems in IE: the browser suddenly decides to start doubling the size of our margins (more on that can be found here<\/a>). But the \u201cdisplay: inline\u201d rule reminds Internet Explorer that we really want all these elements in a snug little row, so no extra margin gets inserted.<\/p>\nOf course, after all that work our tabs are still a little tough to read, so let\u2019s apply a couple more styles to our links:<\/p>\n
ul#nav li a {\n\tdisplay: inline;\n\tfloat: left;\n\tpadding: 8px 5px 3px 5px;\n\tmargin-right: 5px;\n\tbackground-color: #034a7f;\n\tcolor: #fff;\n\tfont-weight: bold;\n\ttext-decoration: none; }<\/pre>\nThis change is basic, but effective. I set the text color to white, the font weight to bold, and used \u201ctext-decoration: none;\u201d to remove the underline from our tabs. The change is a big improvement.<\/a><\/p>\nNow, we could be done here, but I like to add a touch of interactivity to my tabs. Another benefit of making the tabs out of our anchor tags is that anchor tags respond to the :hover state in all<\/em> browsers… including Internet Explorer (even though it ignores it everywhere else). So let\u2019s add some style to our hover states:<\/p>\nul#nav li a:hover {\n\tpadding-top: 12px;\n\tbackground-color: #075a97; }<\/pre>\nAnd just like that, our navigation bar responds to interaction.<\/a> Hover your cursor over the tabs and watch how they drop down and change color in response to your every whim. That little touch of interactivity helps ensure your users know exactly what they\u2019re clicking on, and adds a touch of sophistication to the top of your page. And better still, the tabs (and text within) grow and shrink automatically when your users change the page\u2019s text size \u2013 I\u2019d like to see an image map do that! With these simple styles in your bag of tricks, your client\u2019s wife doesn\u2019t stand a chance.<\/p>\nIf you found this post useful, watch for a follow-up article later in the week<\/strong>, where I\u2019ll show you how to make your navigation elements \u201cself-aware\u201d with just a touch of JavaScript and a couple extra CSS rules. If that sounds interesting, subscribe to the feed.<\/a> If that sounds scary, you\u2019ve watched too many Terminator movies.<\/p>\nUpdate:<\/strong> You can read the second article in this two-part series here.<\/a><\/p>\n