1. Introduction
Dynamic Table of Contents (jquery-dynamic-content-menu) is a jQuery plugin written for Boostrap 4 framework. The plugin creates content menu in the sidebar (on the fly) with headings taken from articles on the page. Clicking the item will smoothly scroll focus to that specific section with a chosen heading. The plugin is fully customizable, it can be easily adapt to your needs.
2. Plugin Overview
Library | jquery-dynamic-content-menu |
Author | Sergio |
Licence | MIT Licence |
Repository | GitHub |
Dependencies | jQuery 1.3.1 or Latest version and Bootstrap 4.1.3 |
3. How to install jquery-dynamic-content-menu plugin
Follow below steps to install dynamic content menu plugin.
1. first load the Bootstrap and jQuery in your HTML document
2. second, include jquery-dynamic-content-menu plugin CSS and JavaScript files
3. the last step is to place jquery-dynamic-content-menu plugin initialization script before body close tag
Plugin will process every h1 element and put it into the sidebar content menu. Content on the page can look like the following:
4. Conclusion
In this article, we showcased a dynamic table of contents plugin written in jQuery. Fully automatic, easy to customize and integrate with any website. With this plugin, you don't have to remember to update the content menu links everytime you change headings in your document.
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}