Standard Tabs

I was off last week, taking a much needed break. Of course, instead of really relaxing, I decided to play with a PHP framework that I have been tuning and instead laid the foundation for a web-based stuff management system (I have too many books and DVDs to remember what I own anymore). Anyway, this project gave me a good opportunity to build a website from the ground up, adhering to standards and accessiblity. Over the next few months, as I release parts of the project, I will be covering design/engineering topics related to this project.

Today, we will discuss the best-practices way to do a top navbar. So first, lets state what is meant by best-practices in tab design:

  1. Scalable: both vertically and horizontally
  2. Simple, human-readable code
  3. Accessible
  4. Flexible: easy to change/update

The best HTML structure to meet this criteria is an unordered list, containing anchors that are the actual tab links. The unordered list can be easily (un)styled, is built with very little code, and is easy to change. Additionally, many screen readers will iterate through the list items. Here is some sample HTML code:

Example 1: Navigation HTML

<ul id="nav">
	<li id="nav-home"><a href="/">Home</a></li>
	<li id="nav-items"><a href="/">Items</a></li>
	<li id="nav-add"><a href="/">Add</a></li>
</ul>

The id attribute nav will be used to uniquely apply navigation styles to this list. If we ignore any tab background and border styles, you will need the following CSS:

Example 2: Navigation CSS

#nav {
	border-bottom: 1px solid #999;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

#nav li {
	float: left;
	font-family: "Lucinda Grande", sans-serif; /** change this to a font-family you like */
	list-style: none;
	margin: 0;
	padding: 0;
}

#nav a {
	color: #666;
	display: block;
	float: left;
	font-size: 1.2em;
	font-weight: bold;
	padding: 0.6em 4em 0.6em 2em; /** This is the padding around the tab titles, modify it to fit your needs */
	text-decoration: none;
}

#nav a:hover {
	color: #000;
}

My page has odd padding, because I am using a variation of the slant tabs, as shown at Bulletproof Slants. The right side of the anchor tag has extra padding to accommodate the slanting background image. The tabs themselves will have a solid color when not hovering. In my variation the tabs, have a gradient when they are hovered, to pop them a bit. I am not a graphic designer, so my gradient sucks, but I believe it conveys the right idea.

Example 3: Navigation Background

#nav a {
	background: #CCC url(../img/nav/nav_slant.gif) no-repeat scroll right top;
}

#nav a:hover {
	background: #CCC url(../img/nav/nav_on_bg.gif) repeat-y scroll right top;
}

Check out my example on my Tab Test Page;

An alternate strategy is described in Dan Cederholms book, Bulletproof Web Design, using two top to bottom gradient images, one fading to the non-selected color and the other fading to the selected color. Then swapping the background image when hovering.