jQuery.sdScrollMenu is a lightweight jQuery plugin for creating a dynamic menu based on <h *> headings within a text.

jquery toc example, table of contents javascript, create dynamic table in jquery, dynamic table of contents javascript, jquery create table of contents

Features

• Supports an unlimited number of titles
• Highlights addresses on hover with the .active class
• Responsive with the inner slider and focus on the active items

How to make use of it:

1. First of all, you’ll need to set the plugin to a large <div> filled with text.

<div id="scroll-menu">
  <h1>Section 1</h1>
  <p>Lorem ipsum ...</p>
  
  <h2>Sub-section 1.1</h2>
  <p>Nullam vestibulum ...</p>
  <p>Nunc hendrerit ...</p>
  
  <h2>Sub-section 1.2</h2>
  <p>Integer feugiat ...</p>
  
  <h3>Sub-section 1.2.1</h3>
  <p>Cras porta ...</p>
  
  <h3>Sub-section 1.2.2</h3>
  <p>Aenean vestibulum ...</p>
  
  <h1>Section 2</h1>
  <p>Cras ullamcorper ...</p>
  <!-- and so on -->
</div>

2. You will then need to model the .active class and the .active.first class respectively because they are the ones applied to the <li> match in the list, like so:

.sdsm-menu li:hover {
    color: #146;
}

.sdsm-menu li.active.first {
    font-weight: bold;
    color: #a19d38;
}

.sdsm-menu li.active {
    color: #a19d38;
}

3. jQuery.sdScrollMenu initialization syntax is as follows:

jQuery(function($) {

    $('#scroll-menu').sdScrollMenu({
        width: 250, // integer: in px
        scrollDuration: 500, // integer: in ms
        titles: 'h3, h4, h5, h6', // string: jQuery selectors
        highlightDuration: 1000, // integer: in ms
        highlightColor: '#a19d38' // string: color
    });

});

Options

auto table of contents jquery, jQuery.sdScrollMenu Plugin/Github/jsfiddle, html automatic table of contents

See Demo And Download

Official Website(stevedavid): Click Here

This superior jQuery/javascript plugin is developed by stevedavid. For extra advanced usage, please go to the official website.