|
TabsModule
Notes on the Tabs Module
Tabs ModuleLocation/stylesheets/modules/tabs.css Source Codehttp://code.google.com/p/sparkl/source/browse/trunk/stylesheets/modules/tabs.css SummaryTabbed navigation has become more and more popular recently on the web. It is a useful design as it makes the site easy to navigate and provides a useful look for the main, global navigation. This module alows you to transform a list of links into a fully flexible set of tabs by simply adding an extra class name. HTML Design Pattern<ul class="tabbed navigation"> <li>home</li> <li><a href="blog.htm" title="the blog">blog</a></li> <li><a href="contact.htm" title="get in touch">contact</a></li> </ul> DescriptionBy simply adding a class of 'tabbed navigation' an ordinary list of links is changed into flexible tabs that don't rely on images. It makes sense to mark up navigation as a list as it is in fact a list of links. The markup is very clean, readable, semantic and lightweight. The tabs will highlight the 'current page' differetly and also have a hover effect as they are moused over. Why It's BulletproofIf somebody increases the text size in order to improve readability, the tabs will simply scale themselves upwards to fit. The tabs can be any size and contain more than one word. They are easy to update - simply add a new list item to the list of links. If the browser window changes size then the tabs will scale to fit inside. At smaller window sizes, they may wrap onto a new line and not look as aesthetically pleasing, but they will remain usable. Because the tabs are marked up as a list, it is accessible and will display without any CSS and be accessible by a screen reader. How It WorksThe list-style is removed, so there are no bullet points. The list-items are floated to make them display in a horizontal line. Padding is added to make them appear more like square tabs. text-decoration: none; removes any underlines from the links. The 'current' tab actually works by not containing a link (since that tab is the current page, it does not need to be a link). The hover image is also attached to the meta tag. This will mean that it is loaded with initially with the page and avoid a short lag when the tabs are initially hovered on. IE FixesIE6 doubles any margins used because of the floated elements. This is fixed, without affecting anything else by the declaration display: inline. The floated list-items and links are not contained by the unordered list container in IE6 and below as it does not 'have layout'. This can be remedied using the following code: * html ul.navigation.tabbed
{
display: inline-block;
}IssuesIt is impossible to centre the tabs, unless an extra container div is added. Further Reading'Bulletproof Web Design', chapter 2 by Dan Cederholm Other Modules
|
Sign in to add a comment
