jQuery Tocible
A lightweight jQuery plugin for creating table of contents navigation menu.
Demo
View demo on http://markserbol.github.io/tocible/
Basic Usage
jQuery Tocible creates a table of contents navigation menu that animates anchoring on click and follows user scrolling.
Include the latest jQuery library together with jquery.tocible.css and jquery.tocible.js in your document's <head> and call .tocible().
HTML
<div id="contents"> <div class="ref"> <!-- This element will be the reference for the navigation list positioning, especially on RWD, so position well to your liking. --> </div> <article> <h2>Heading</h2> <p>...</p> <h3>SubHeading</h3> <p>...</p> </article> </div>JavaScript
$('#container').tocible({ heading: 'h2', //[selector], the first level heading subheading: 'h3', //[selector], the second level heading reference:'.ref', //[selector], reference element for horizontal positioning title: '', //[selector or string], title of the menu hash: false, //[boolean], setting true will enable URL hashing on click offsetTop: 50, //[number], spacing/margin above the menu speed: 800, //[number or string ('slow' & 'fast')], duration of the animation when jumping to the clicked content collapsible: true //[boolean], enabling true will auto collapse sub level heading not being scrolled into maxWidth: 150 //[number], set max-width of the navigation menu });Compatibility
Tested on modern browsers – Chrome, Firefox, Safari, also IE.
Changelog
-
v1.2.0 (24 Jun 2014)
Restructure to support Responsive Design
Rename plugin options:
offsettooffsetTop,navigationtoreferenceAdd option
maxWidth, set the menu's "max-width" property -
v1.1.1 (25 Jan 2014)
Fix menu left positioning
-
v1.1.0 (13 Jan 2014)
Add option
collapsible, for collapsing subheading listModify option defaults
-
v1.0.2 (10 Jan 2014)
Initial release
License
jQuery Tocible is under MIT License
That's it! Please star, fork, and don't hesitate to raise an issue.
