More Navigation

I recently designed a navigation bar that meets the following criteria:

Cross-browser support (IE, Chrome, Firefox)
Scriptable (add/change links by only changing HTML, can create an ASP .NET or other server control with it)

The design I came up with looks like this:



The images are replaceable to match whatever theme. Sizes and so forth can be adjusted in the CSS.

Here's the HTML layout:

<div class="subNav">
  <div class="line"></div>
  <table class="links" cellpadding="0" cellspacing="0">
  <tr><td>
    <a href="#">
      <span class="left"></span>
      <span class="mid-wrapper">
        <span class="mid"></span>
        <span class="text">Text</span>
      </span>
      <span class="right-mid"></span>
    </a>
  </td><td>
    <span class="divider"><span>
  </td><td>
    <a href="#">
      <span class="left-mid"></span>
      <span class="mid-wrapper">
        <span class="mid"></span>
        <span class="text">Text</span>
      </span>
      <span class="right-mid"></span>
    </a>
  </td><td>
    <span class="divider"><span>
  </td><td>
    <a class="selected" href="#">
      <span class="left-mid"></span>
      <span class="mid-wrapper">
        <span class="mid"></span>
        <span class="text">And More Text</span>
      </span>
      <span class="right"></span>
    </a>
  </td></tr>
  </table>
</div>

It is a lot of HTML, compared to some other ways to do it, but it doesn't have any weird, oversized target areas, and it is very scriptable.

Here's the CSS (for transitional doctype):

.subNav
{
  position: relative ;
  width: 100% ;
  height: 32px ;
  text-align: center ; /* centers in IE */
}

.subNav .line
{
  position: absolute ;
  left: 0 ;
  top: 15px ;
  height: 1px ;
  border-top: 2px solid #aaa ;
  width: 100% ;
}

.subNav .links
{
  position: relative ;
  top: 0 ;
  margin: 0 auto ; /* centers in firefox and chrome */
  text-align: center ;
  vertical-align: bottom ;
}

.subNav .links a
{
  position: relative ;
  display: block ;
  text-decoration: none ;
  color: #000 ;
  height: 32px ;
  padding: 0 4px;
}

.subNav .links a:hover
{
  cursor: pointer ;
}

.subNav .links a .left
{
  position: absolute ;
  display: block ;
  left: -4px ;
  width: 8px ;
  height: 32px ;
  background: url(subNav-grey-left.png) no-repeat ;
}

.subNav .links .selected .left
{
  background: url(subNav-blue-left.png) no-repeat ;
}

.subNav .links a:active .left
{
  background: url(subNav-blue-left.png) no-repeat ;
}

.subNav .links a .right
{
  position: absolute ;
  display: block ;
  top: 0 ;
  right: -4px ;
  width: 8px ;
  height: 32px ;
  background: url(subNav-grey-right.png) no-repeat ;
}

.subNav .links .selected .right
{
  background: url(subNav-blue-right.png) no-repeat ;
}

.subNav .links a:active .right
{
  background: url(subNav-blue-right.png) no-repeat ;
}

.subNav .links a .left-mid
{
  position: absolute ;
  left: 0 ;
  top: 0 ;
  display: block ;
  width: 4px ;
  height: 32px ;
  background: url(subNav-grey-mid.png) repeat-x;
}

.subNav .links .selected .left-mid
{
  background: url(subNav-blue-mid.png) repeat-x;
}

.subNav .links a:active .left-mid
{
  background: url(subNav-blue-mid.png) repeat-x;
}

.subNav .links a .right-mid
{
  position: absolute ;
  right: 0 ;
  top: 0 ;
  display: block ;
  width: 4px ;
  height: 32px ;
  background: url(subNav-grey-mid.png) repeat-x;
}

.subNav .links .selected .right-mid
{
  background: url(subNav-blue-mid.png) repeat-x;
}

.subNav .links a:active .right-mid
{
  background: url(subNav-blue-mid.png) repeat-x;
}

.subNav .links a .mid-wrapper
{
  position: relative ;
  display: block ;
}

.subNav .links a .mid
{
  position: absolute ;
  display: block ;
  height: 32px ;
  width: 100% ;
  background: url(subNav-grey-mid.png) ;
}

.subNav .links .selected .mid
{
  background: url(subNav-blue-mid.png) ;
}

.subNav .links a:active .mid
{
  background: url(subNav-blue-mid.png) ;
}

.subNav .links a .text
{
  position: relative ;
  top: 8px ;
  font-size: 14px ;
  font-family: sans-serif ;
  line-height: 16px ;
  vertical-align: top ; /* makes it v-centered in IE */
  padding: 0 8px ;
}

.subNav .links .divider
{
  display: block ;
  height: 32px ;
  width: 1px ;
  background: url(subNav-divider.png) no-repeat ;
}

As you can see, everything to do with the layout is defined in the CSS, from sizes to images.