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: offset to offsetTop, navigation to reference

Add 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 list

Modify 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.

markserbol/tocible