Mar 8 2005

Bending the Matrix

For anyone who’s interested, here’s how I bent the navigation bar at the top of my site. It’s a variation of the Navigation Matrix posted on Superfluous Banter. (Spanish Language Version)

View my working demo.

We start with one Unordered List.

<ul id="nav">
  <li id="arc"><a href="archives.html">Archives</a></li>
  <li id="exa"><a href="examples.html">Examples</a></li>
  <li id="ctc"><a href="contact.html">Contact</a></li>
  <li id="ctb"><a href="about.html">About</a></li>
  <li id="lin"><a href="links.html">Links</a></li>
  <li id="fos"><a href="#" onclick="setActiveStyleSheet('', 1);return false;" title="Switch to Small Font">Small Font Size</a></li>
  <li id="fol"><a href="#" onclick="setActiveStyleSheet('large', 1);return false;" title="Switch to Large Font">Large Font Size</a></li>
</ul>

For simplification purposes, I have removed the JavaScript for the Stylesheet Switcher.

Mix in One Image

The menu, from hereon referred to as “The Bend”, utilizes only one image (two if you count the large font version), and uses the CSS background-position property to control all rollover effects. View the menu image alone.

Apply CSS Liberally

The majority of the CSS tricks used are described in the Navigation Matrix article, but let I’ll go over what I did differently, and some extra things to consider for the curved nature of The Bend. I will explain the theory below.

As when dealing with anything on the web, The Bend must fit into a box. But The Bend is not a box. So, a little CSS tomfoolery must ensue.

First, we break The Bend up into its segments.

The overall height of The Bend is 73 pixels, each section having its own specific width. However, when you break it up this way, some of the buttons have lots of empty space around them, and could cause premature-highlighting.

If we relate the overall impression of The Bend to an image with HTML hot spots, we need to shrink those hotspots to fit only the part of the button we want to use. We do this by supplying exact height values to each <a> tag, and specifying an exact margin-top to place it in its correct position. The result is pictured here.

So that’s pretty much it. Throw in a little JavaScript, an alternate stylesheet, and it all fits together pretty well.