A multi feature jQuery plugin for Bootstrap 4 to generate table of contents dynamically. The plugin get headings from article and make a beautiful content menu in sidebar. When user clicks a specific heading from TOC then content page smoothly scroll to that heading’s section.
Moreover, you can fully customize content menu with its available options & with additional CSS according to your needs.
Plugin Overview
| Plugin: | jquery-dynamic-content-menu |
| Author: | Sergio |
| Licence: | MIT Licence |
| Published: | January 20, 2024 |
| Repository: | Fork on GitHub |
| Dependencies: | jQuery 1.3.1 or Latest version and Bootstrap 4.1.3 |
| File Type: | zip archive (HTML, CSS & JavaScript ) |
| Package Size: | 14.5 KB |
How to Use Bootstrap Table of Contents
1.Load the Bootstrap and jQuery in your HTML document to getting started with dynamic table of contents.
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Bootstrap CSS --> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- Bootstrap JS --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
2. Also include plugin’s assets that will generate table of contents.
<!-- Dynamic TOC Assets --> <link rel="stylesheet" href="css/jquery-dynamic-content-menu.css"> <script src="js/jquery-dynamic-content-menu.js"></script>
3. After that, create some paragraph with headings.
<h1> First heading </h1> <p> Some contents...</p> . . . <h2> Second heading </h2> <p> Some contents...</p> . . . <h2> Third heading </h2> <p> Some contents...</p>
4. Create a div element with a unique id in which TOC will be generated.
<!-- Side -->
<div class="col-md-4">
<!-- Plugin menu in this place -->
<div id="dinamicMenu"></div>
</div>
5. Finally, initialize the plugin in jQuery document ready function to active bootstrap 4 table of contents.
$(document).ready(function(){
$("#dinamicMenu").dynamicContentMenu({
'selectors' : "h1, h2",
});
});
Advance Configuration Options for Bootstrap Table of Contents
The following are some advance configuration options to create / customize “dynamic table of contents”.
| Option | Description, Default, Type |
|---|---|
theme |
Define the theme for TOC. Default: “material”, Type: String.
$("#dinamicMenu").dynamicContentMenu({
theme: "material",
});
|
selectors |
This option selects headings to be shown in TOC. Defaullt: “h1, h2, h3”, Type: String | Object.
$("#dinamicMenu").dynamicContentMenu({
selectors: "h1, h2, h3",
});
|
extendPage |
Decide weather to extend page or not. Default: true, Type: Boolean.
$("#dinamicMenu").dynamicContentMenu({
extendPage: false,
});
|
smoothScroll |
Decide weather to scroll smoothly to sections or not. Default: true, Type: Boolean.
$("#dinamicMenu").dynamicContentMenu({
smoothScroll: false,
});
|
scrollHistory |
Adds a hash to the page url, to maintain history, when scrolling to a DynamicContentMenu item. Default: false, Type: Boolean.
$("#dinamicMenu").dynamicContentMenu({
scrollHistory: true,
});
|
smoothScrollSpeed |
Define the scrolling speed. Default: “medium”, Type: String.
$("#dinamicMenu").dynamicContentMenu({
smoothScrollSpeed: "medium",
});
|
hideEffect |
CSS animation for hiding sub headings on scroll. Default: “slideUp”, Type: String.
$("#dinamicMenu").dynamicContentMenu({
hideEffect: "slideUp",
});
|
Similar Code Snippets:
Bootstrap 4 Responsive Mega Menu on Hover
Show Menu On Click JavaScript
CSS Tree View with Lines Using ul li
Responsive Navbar with Vanilla JavaScript
JavaScript Treeview with Search
Bottom Navigation Bar with Indicator in JavaScript
HTML Multilevel Accordion Navigation Menu
Dashboard Grid Menu Using HTML CSS
Navigation with Flexbox and SVG Icons
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.