Navigation Matrix
This method has been updated! See Navigation Matrix Reloaded.
It’s been a while since I shared my last navigation experiment. This new experiment is, as the first one, based exclusively on graphics — therefore the same usability and accessiblity cautions apply. Unsurprisingly, once CSS is disabled, a nice unordered list should remain. I probably don’t need to explicitely mention that this example is constructed using well-formed and semantic XHTML instead of tables. All the tabs work and are linked to 4 individual html pages (welcome.html, products.html, support.html and contact.html) that each load the same stylesheet.
How it works
At first this example might not seem very different from other navigation experiments. But the most interesting part is hidden in the code and the methodology. My example is called navigation matrix because it actually loads a matrix to display the correct graphics for the menu items. Below I included the image that is downloaded — just once.
As you can see it contains all the different states required for the navigation to function properly. In essence it’s based on the method to shift background positions, which of course works faster than shifting individual images. By assigning a specific id to each body tag in individual pages I can target the list elements and set their respective backgrounds. The only thing I need to do is make sure that the background is in the right position for each element. I use the above matrix to see what position I need.
Markup (welcome.html):
<body id="homepage">
<ul id="nav">
<li id="wel"><a xhref="welcome.html" mce_href="welcome.html">welcome</a></li>
<li id="pro"><a xhref="products.html" mce_href="products.html">products</a></li>
<li id="sup"><a xhref="support.html" mce_href="support.html">support</a></li>
<li id="con"><a xhref="contact.html" mce_href="contact.html">contact</a></li>
</ul>
<body>CSS
ul#nav {
position: relative;
margin: 0 auto 0 auto;
width: 650px;
padding: 0;
border: 5px solid #fff;
height: 120px;
background: #666 url(header.png) no-repeat left top;
list-style-type: none;
}
ul#nav li a {
position: absolute;
top: 68px;
width: 84px;
text-indent: -9000px;
text-decoration: none;
padding: 22px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:22px; /* IE5/Win */
background: #666 url(nav_f.png) no-repeat;
}
body#welcome li#wel a {
background-position: 0 -44px; width: 94px; left: 188px;
}
body#welcome li#wel a:hover { background-position: 0 -44px; }
body#welcome li#pro a { background-position: -94px 0; left: 282px; }
body#welcome li#pro a:hover { background-position: -94px -22px; }
body#welcome li#sup a { background-position: -178px 0; left: 366px; }
body#welcome li#sup a:hover { background-position: -178px -22px; }
body#welcome li#con a { background-position: -262px 0; left: 450px; }
body#welcome li#con a:hover { background-position: -262px -22px; }The markup itself is basically just an unordered list with ids — nothing fancy. As mentioned earlier I assign a specific id to the body tag to make sure I can set different backgrounds on different pages. The CSS contains nothing really new either. For each list link, and respective state, I determine the correct position of the background image. Download the complete CSS file to have a closer look.
Advantages
I showed this method to Dan and he told me he thought of a similar method when Dan Cederholm was working on the navigation tabs for Fast Company. To me the method mainly has advantages because it’s simple and keeps the number of graphics needed to a minimum — all I really need to do is set the correct position, top and left. But in the comments section of SimpleBits, Dan explains that there are more advantages than simplicity.
Having one graphic for navigation also makes future changes easier. Changing colors will only require to edit one file. All in all this example is not revolutionary and does not show you anything new per se. However it combines a few tricks that make this a fun and useful method.
This item was posted by on Tuesday, May 4th, 2004.
Categories:
You can follow comments on this item via the RSS 2.0 feed.
Comments are closed.
Zelnox
Bruce Boughton
Ireney Berezniak
Didier Hilhorst
Susanna
Bob Easton
Mike