Steve Fenton
Author of The Reason Your Website Sucks

Quick Links

Visit the jQuery Side Content project hub, which has a demonstration and download for this plugin on JS Plugins JavaScript Plugin Library.

Description

The jQuery Side Content project is a plugin for the jQuery JavaScript Framework, which converts divisions on the page into tabbed bars glued to the side of the browser window, which expand and contract when the user clicks on the tab header.

Requirements

• jquery.js
• jquery.sidecontent.js

CSS

/* Optional styles */
 
		.sidecontentpullout {
			background-color: Black;
			color: White;
			padding: 4px 3px;
			-moz-border-radius-bottomleft: 1em;
			-moz-border-radius-topleft: 1em;
			-webkit-border-bottom-left-radius: 1em;
			-webkit-border-top-left-radius: 1em;
			border-bottom-left-radius: 1em;
			border-top-left-radius: 1em;
		}
 
		.sidecontentpullout:hover {
			background-color: #444444;
			color: White;
		}
 
		.sidecontent {
			background-color: Black;
			color: White;
			-moz-border-radius-bottomleft: 1em;
			-webkit-border-bottom-left-radius: 1em;
			border-bottom-left-radius: 1em;
		}
 
		.sidecontent > div > div {
			padding-left: 10px;
			padding-right: 40px;
		}

JavaScript

$(".side").sidecontent();

With all options set:

$(".side").sidecontent({
    classmodifier: "sidecontent",
    attachto: "rightside",
    width: "300px",
    opacity: "0.8",
    pulloutpadding: "5",
    textdirection: "vertical"
});