B’nB Navigation / Guy Leech

B’nB Navigation

Most navigation these days suffers from using fixed width images, making it hard to scale with text size. Alternatively, flowing tabs are created using a number of non-semantic divs. This article will reveal how to create a semantic, scale-able, sexy set of tabs, ready for any use.

Three times lucky

When using a list for navigation, there are three different background images that you can use, rather than two. Many sites use the <li> and links background, but you can also use the encompassing lists background-image. This allows you to set the look of the tabs, and then use the inner <li> and link background to make the tabs scale-able, and give them shape.

The posh way

Here’s the semantic list:

<ul id="navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

To transform the list into a row of tabs you float the list items to the left (display: inline; creates slight margins between each <li> which allows the lists background to show through, ruining the effect). As the <li>s are floated to the left, the whole list must be floated, so that it expands to exactly fill the space occupied by the tabs.

In this first step you can see the basic tab background, as the <ul>’s background, and some padding:

#navigation {
  background: #0077cb url(images/background.png) repeat-x;
  float: left;
}

#navigation li {
  float: left;
  list-style: none;
  padding: .2em 0;
}

#navigation a {
  padding: .2em .5em;
  color: #fff;
}

A quick note on the above: make the <ul>s background color the same as the bottom-most point of the image, so that when the image is scaled it still looks good. Also, the lists background is horizontally repeat-able; this is important so the tabs can scale to any text size.

Cornering the beast

And now to throw some corners in. You’re going to add a top left rounded corner to each tab, using the <li>’s background. The same goes for the right top corner, but this time apply it to the #navigation a background, and set its position to top right.

Because of the way these elements overlap each-other, it is important to apply any padding to the #navigation a (inner) element; otherwise the corners will be at different heights. Having said that, you must apply the same top and bottom padding to both the #navigation li and #navigation a, or else the padding won’t be visible.

Take a look at the new corners, and at the code (and make sure to try different font-sizes):

#navigation {
  background: #0077cb url(images/background.png) repeat-x;
  float: left;
}

#navigation li {
  background: url(images/corner_left.png) top left no-repeat;
  float: left;
  list-style: none;
  padding: .2em 0;
}

#navigation a {
  background: url(images/corner_right.png) top right no-repeat;
  padding: .2em .5em;
  color: #fff;
}

Delusions of margins

Using the lists background means that you can’t put margins in-between your <li>’s. However, you can add borders; setting the border-color to the same color as the area behind the list will achieve the illusion of margins. These borders must be added to the #navigation li, as seen in the finished piece.

And, as icing on the cake, this works in IE5.5 upward.

Where now? Use your imagination. This technique, while perfect for rounded tabs, can be adopted for anything. If your name is Jason, you might do something like this example. Notice that the the <li>s background is in the top center, and has a hover version. You might want some decoration above and below your text; just move the two flowing images to top center and bottom center respectively.

Limitations

B’nBing allows you do do many wonderful things, but there’s a few things it has trouble pulling off (such as a 5 star ocean view). So keep these points in mind:

The lists background must be horizontally repeat-able.
There’s no easy way to center the list, as it has to be left or right floated.
Vertical effects constrain. If you have a shiny glow running down the side of your tabs, it limits the amount of space your list can expand into.
Set your padding and border-width in em, so it expands with the text size.
Full width hover effects are hard to pull off, as you can’t have a hover on the lists background, though you can have a hover effect on the two inner images.

Then again, everyone knows that rules were meant to be broken. If you don’t mind tainting the limitless re-sizing of B’nBs, you can achieve all sorts of fun effects. By using very tall inner images, you can get vertical glows, borders, and so on working, and by using wide, transparent images, you can create full width hover effects. If you don’t want rounded corners, you can also make vertically repeating inner images, to get all sorts of effect of vertical nature. However, the strength of this technique is in it’s ability to re-size; if you’re going to be using fixed width images, you may as well use any other method.

And there you have it; a semantic, scale-able, sexy navigation technique. Do what thou wilt.

This post was published on 23 . 07 . 2007.

Blog