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>
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.