Submit your widget

Tocible - A lightweight jQuery plugin for creating table of contents navigation menu

Created 5 years ago   Views 17988   downloads 4246    Author markserbol
Tocible - A lightweight jQuery plugin for creating table of contents navigation menu
View DemoDownload
62
Share |

A lightweight jQuery plugin for creating table of contents navigation menu.

Basic Usage

Tocible creates a table of contents navigation menu that animates anchoring on click and follows the user scrolling.

Include the latest jQuery library together with tocible.css and jquery.tocible.js in your document's<head> and call .tocible().

Markup

<div id="container">
    <article>
        <h2>Heading</h2>
        <p>...</p>
        <h3>SubHeading</h3>
        <p>...</p>    
    </article>
    <nav>
      <!-- This will hold the navigation list, 
      position this element to your liking -->
    </nav>
</div>
$('#container').tocible({
    heading: 'h2', //required, selector, the first level heading
    subheading: 'h3', //required, selector, the second level heading
    navigation: 'nav', //required, selector, navigation list container
    title: 'h3', //optional, selector or string, title of the navigation
    hash: false, //optional, boolean, setting true will enable URL hashing on click
    offset: 50, //optional, number, top spacing/margin for the navigation
    speed: 500 //optional, number or string ('slow' & 'fast'), animation speed when anchoring
});

Compatibility

Tested on modern browsers – Chrome, Firefox, Safari, also IE.

License

Tocible is under MIT License

That's it!