Steve Fenton

Jquery Side Content

Quick Links

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

Side Content Demonstration.

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.

If you find my open source projects and jQuery plugins useful,
please consider making a donation!

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"
});

You Are Here: Home » JavaScript » Side Content