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:
- Dock Navbar Using HTML and CSS
- CSS 3D Folding Dropdown Animation
- Sticky Navigation Menu with Smooth Scrolling
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.