|
VerticalTabsModule
Notes on the Vertical Tabs Module
Vertical Tabs ModuleLocation/stylesheets/modules/vertical-tabs.css Source Codehttp://code.google.com/p/sparkl/source/browse/trunk/stylesheets/modules/vertical-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="vertical 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 'vertical 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. The links may wrap onto a new line, 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. 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 link 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 do not 'have layout' in IE7 and below, which causes weird margins appearing between each list item. This can be remedied using the following code: ul.navigation.vertical
{
display: inline-block;
}IE6 and below doesn't understand chained class names such as ul.vertical.navigation - it only sees the last class, in this case 'navigation'. This would cause conflicts between this module and the tabbed-navigation module, so the classes have to all be written backwards, ie ul.navigation.vertical so that the unique class comes last. This will now clash with any other classes using the word 'vertical' but hopefully that will not occur too often. Issuestext-indent is used, rather than padding (which won't work in IE6 due to it requiring the width to be specified as 100%). If the text flows onto two lines then only the top line will be indented. Further ReadingOther Modules
|
Sign in to add a comment
