Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Tabs plugin for the Blueprint CSS framework
tree: e28e8f564f
Failed to load latest commit information.
AUTHORS.textile
README.textile Fixing README
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

Something went wrong with that request. Please try again.