Jquery Side Content
You Are Here: Home » JavaScript » 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.
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
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" });