I have shown you how to create horizontal menus that are styled with background colors, adding rollover effects for usability. However, designs are rather limited if we restrict ourselves to styling the list elements' colors and/or just styling fonts.
We have explored some simple ways to use background graphics to "dress-up" a menu. We will take this another step further by discussing ways to implement tabbed navigation.
Tabbed navigation menus are very common. They are often implemented using image-editing software so that the text and tab are all integrated as graphics in the image file. Each tab and corresponding rollover images are separate images.
There are two disadvantages of creating tabbed navigation using this 'all-image tab' technique:
- Each time the navigation menu is changed, new images have to be generated for the new tabs and their corresponding link states.
- Each tab and each of its rollover images must be downloaded, slowing web page performance. For example, if there are five tabs, and each tab has one hover effect, a total of ten images must be downloaded to display the tabs in their normal state, and in their hover state.
An alternative method would be to add text to the tab using HTML markup, and make the tab graphic a common background image used for all tabs. The benefits are:
- Any changes to the menu simply requires updating the list in the markup. No new images need to be generated for the new menu items.
- Since the tab image is common to all the menu items, you only need one tab image for the "normal" state, and a tab image (if required) for any other link states. In fact, if the designer simply changes the font characteristics for link states using CSS properties, then only a single tab image is required. In any event, the number of images used for the tab interface is drastically reduced compared to the 'all-image tab' technique.
The only downside to this technique is that it doesn't work well if the length of the text for each menu item varies widely.
For instance, if one tab is "About" and another tab is "Product Information",
using a common tab for all menu items means that the tab has to be wide enough to accomodate "Product Information". For example:
Well, as you can see, the "About" tab has too much empty space while the "Product Information" tab appears a bit cramped by comparison.
What we'd like to do is have tabs that automatically adjust in width and height to accommodate any length or size text that we want to add to the tabs. The tabs would automatically widen and get taller as needed to fit the text, no matter what size it is.
Douglas Bowman has come up with a clever technique that does just that.
Dubbed the Sliding Doors method,
it utilizes an extra tall and extra wide tab image that is split on one edge.
Here's what the pieces of the oversized tab look like:
The Sliding Doors method capitalizes on the fact that a background image is clipped by its element's visible box.
Simply put, the right-side of the oversized tab is clipped by the containing DIV or the LI element
(depending on the variation of the method),
and the left side of the oversized tab is clipped by the A tag for the navigation menu item.
This creates the illusion of a single graphic for the tab ...
and the tab is only as wide and tall as the text for the tab!
The Sliding Doors method can be extended using the Pixy Method to generate rollover effects for tabs. Pretty cool!
This
page
demonstrates the Sliding Doors method.
Use Firefox to increase the text size on the page—notice that
the tab size grows to accomodate the larger/wider text.
You can view the HTML and CSS to examine how the Sliding Doors method is implemented.
The intent of this discussion is to give you an exposure to the Sliding Doors Method. If this technique interests you, the resources below will provide all the information you'll need to utilize this method in your web pages.
Resources
-
Douglas Bowman describes
how to implement the Sliding Doors method
.
Douglas Bowman. A List Apart.
-
Sliding Doors, Part II
.
Creating a navigation bar where none of the tabs are highlighting the current page.
Also discusses the Pixy Method applied to the Sliding Doors Method.
Douglas Bowman. A List Apart.