Tabs plugin for the Blueprint CSS framework
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
AUTHORS.textile
README.textile
screen.css

README.textile

Blueprint CSS Tabs Plugin Readme

This plugin adds a simple and flexible set of horizontal tabs to Blueprint.

Usage:

  1. Upload the screen.css file to a new directory on your server (preferably tabsplugin/)
  2. Include the plugin file in the <head/> of your webpage.
    <link rel="stylesheet" href="tabsplugin/screen.css" type="text/css" media="screen,projection">
  3. Add the class "tabs" to your list. An example:
    
    <ul class='tabs'>
    	<li><a href='#text1'>Tab 1</a></li>
    	<li><a href='#text2'>Tab 2</a></li>
    	<li><a href='#text3'>Tab 3</a></li>
    </ul>
    

More options:

You can add a label to your list by adding the class "label" to the first item. This item should not have a link in it.


<ul class='tabs'>
	<li class='label'>This is a "label":</li>
	<li><a href='#text1'>Tab 1</a></li>
	<li><a href='#text2'>Tab 2</a></li>
	<li><a href='#text3'>Tab 3</a></li>

You can mark the currently selected item with the class "selected".


<ul class='tabs'>
	<li><a href='#text1' class='selected'>Tab 1</a></li>
	<li><a href='#text2'>Tab 2</a></li>
	<li><a href='#text3'>Tab 3</a></li>

Demo:

View a demo at blueprintcss.org