Vertical tabs based navigation is a tried and tested tool in the hands of an interface designer and a fundamental element in the graphical user interface structure. You see it everywhere in your computer software, including many parts of the OS, making tab usage second nature for the user. Naturally it extends on to the web on sites where a lot of information needs to be easily presented and navigated. In this tutorial, we will look at a simple jQuery and (basic) CSS based vertical tabbed navigation structure.

The jQuery

As usual you need to first include the jQuery (jquery.com) library in the head section of the HTML markup. After that, within the script tag, add the following jQuery script:

$(document).ready( function () {
var tabContainers = $(‘div.pages > div’);

$(‘div.leftnav ul.tabNavigation a’).click(function () {
tabContainers.hide().filter(this.hash).show();

$(‘div.leftnav ul.tabNavigation a’).removeClass(’selected’);
$(this).addClass(’selected’);

return false;
}).filter(‘:first’).click();
});

The markup

The HTML needed for the structure is critical. There will be two div-s with classes leftnav and pages respectively and both of them will have to be floated left (or one left and the other right) using CSS so that they appear beside each other. The unordered list (ul) containing the tab links (a) inside list elements (li) will be within the leftnav div. Give the ul a class of tabNavigation. The anchor links will be linked to id-s in the same page, for example #first, #second, and so on.

The pages div will contain divs with ids first, second etc (or anything as per the links within the tabNavigation ul) one after the other. These divs will contain content that need to be shown for the respective tabs.

The CSS

The bare bones style for this structure is as follows:

.leftnav{
float:left; width:150px; } .pages{ float:right; width:600px; }

You might need to add a clear:both; to an outer div that contains both leftnav and pages div-s to solve the floated layout issue. This is the basic CSS needed for the structure to work. Beyond this you are free to style the layout anyway way you want and make it look as smashing you can.

Latest posts by Smarajit Dasgupta

  • Share/Bookmark