This time I will share jQuery Plugin and tutorial about Auto Expanding Table Of Contents Plugin – Dynamic Content Menu, hope it will help you in programming stack.
File Size: | 14.9 KB |
---|---|
Views Total: | 818 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
The Dynamic Content Menu jQuery plugin automatically generates a collapsible and expandable table of contents using nested HTML lists.
More features:
- Smoothly scroll the page to specific content sections.
- Auto show/hide nested TOC items on page scroll.
- Highlight active TOC items on page scroll.
- Auto adjust the page height if a user scrolls to the bottom of the page and the page is not tall enough to scroll to the last table of contents item.
- Auto add a hash to the page url to maintain history.
How to use it:
1. Add references to jQuery library and the Dynamic Content Menu plugin’s files.
1 |
< link rel = "stylesheet" href = "/path/to/jquery-dynamic-content-menu.css" /> |
2 |
< script src = "/path/to//jquery.min.js" ></ script > |
3 |
< script src = "/path/to/jquery-dynamic-content-menu.js" ></ script > |
2. Create a container element to hold the table of contents.
1 |
< div id = "dynamicMenu" ></ div > |
3. Calling the plugin on the container element will generate a nested table of contents from heading elements (h1, h2, h3) found in the document.
1 |
$( function (){ |
2 |
$( "#dynamicMenu" ).dynamicContentMenu(); |
3 |
}); |
4. Customize the container element that holds all of the heading elements used to generate the table of contents. Default: body.
1 |
$( "#dynamicMenu" ).dynamicContentMenu({ |
2 |
context: "#container" |
3 |
}); |
5. Customize the heading elements used to generate the table of contents. The order is very important since it will determine the table of content’s nesting structure. Default: ‘h1,h2,h3’.
1 |
$( "#dynamicMenu" ).dynamicContentMenu({ |
2 |
selectors: "h2, h3, h4, h5, h6" |
3 |
}); |
6. Customize the container element to ignore. Default: null.
1 |
$( "#dynamicMenu" ).dynamicContentMenu({ |
2 |
ignoreSelector: ".ignore" |
3 |
}); |
7. Customize the smooth scroll functionality.
01 |
$( "#dynamicMenu" ).dynamicContentMenu({ |
02 |
// Accepts a boolean: true or false |
03 |
// Determines if a jQuery animation should be used to scroll to specific table of contents items on the page |
04 |
smooth<a href= "https://www.jqueryscript.net/tags.php?/Scroll/" >Scroll</a>: true , |
05 |
06 |
// Accepts Number (milliseconds) or String: "slow", "medium", or "fast" |
07 |
// The time duration of the smoothScroll animation |
08 |
smoothScrollSpeed: "medium" , |
09 |
10 |
// Accepts Number (pixels) |
11 |
// The amount of space between the top of page and the selected table of contents item after the page has been scrolled |
12 |
scrollTo: 0 |
13 |
}); |
8. Customize the auto show/hide functionality.
01 |
$( "#dynamicMenu" ).dynamicContentMenu({ |
02 |
// Accepts a boolean: true or false |
03 |
// Used to determine if elements should be shown and hidden |
04 |
showAndHide: true , |
05 |
06 |
// Accepts String: "none", "fadeIn", "show", or "slideDown" |
07 |
// Used to display any of the table of contents nested items |
08 |
showEffect: "slideDown" , |
09 |
10 |
// Accepts Number (milliseconds) or String: "slow", "medium", or "fast" |
11 |
// The time duration of the show animation |
12 |
showEffectSpeed: "medium" , |
13 |
14 |
// Accepts String: "none", "fadeOut", "hide", or "slideUp" |
15 |
// Used to hide any of the table of contents nested items |
16 |
hideEffect: "slideUp" , |
17 |
18 |
// Accepts Number (milliseconds) or String: "slow", "medium", or "fast" |
19 |
// The time duration of the hide animation |
20 |
hideEffectSpeed: "medium" , |
21 |
22 |
// Accepts a boolean: true or false |
23 |
// Determines if table of contents nested items should be shown and hidden while scrolling |
24 |
showAndHideOnScroll: true |
25 |
}); |
9. Customize the highlight functionality.
01 |
$( "#dynamicMenu" ).dynamicContentMenu({ |
02 |
// Accepts a boolean: true or false |
03 |
// Determines if table of contents nested items should be highlighted (set to a different color) while scrolling |
04 |
highlightOnScroll: true , |
05 |
06 |
// Accepts a number |
07 |
// The offset distance in pixels to trigger the next active table of contents item |
08 |
highlightOffset: 40, |
09 |
10 |
// Accepts a boolean: true or false |
11 |
// Set's the first DynamicContentMenu item as active if no other DynamicContentMenu item is active. |
12 |
highlightDefault: true |
13 |
}); |
10. Determine whether to extend the page if a user scrolls to the bottom of the page and the page is not tall enough to scroll to the last table of contents item.
1 |
$( "#dynamicMenu" ).dynamicContentMenu({ |
2 |
// Accepts a boolean: true or false |
3 |
// If a user scrolls to the bottom of the page and the page is not tall enough to scroll to the last table of contents item, then the page height is increased |
4 |
extendPage: true , |
5 |
6 |
// Accepts a number: pixels |
7 |
// How close to the bottom of the page a user must scroll before the page is extended |
8 |
extendPageOffset: 100 |
9 |
}); |
11. Customize the browser history functionality.
01 |
$( "#dynamicMenu" ).dynamicContentMenu({ |
02 |
// Accepts a boolean: true or false |
03 |
// Adds a hash to the page url to maintain history |
04 |
history: true , |
05 |
06 |
// Accepts a boolean: true or false |
07 |
// Adds a hash to the page url, to maintain history, when scrolling to a DynamicContentMenu item |
08 |
scrollHistory: false , |
09 |
10 |
// How the hash value (the anchor segment of the URL, following the |
11 |
// # character) will be generated. |
12 |
// "compact" (default) - #CompressesEverythingTogether |
13 |
// "pretty" - #looks-like-a-nice-url-and-is-easily-readable |
14 |
// function(text, element){} - Your own hash generation function that accepts the text as an |
15 |
// argument, and returns the hash value. |
16 |
hashGenerator: "compact" |
17 |
}); |
12. Use Material Design theme.
1 |
$( "#dynamicMenu" ).dynamicContentMenu({ |
2 |
theme: "material" |
3 |
}); |
13. Set’s the first DynamicContentMenu item as active if no other DynamicContentMenu item is active.
1 |
$( "#dynamicMenu" ).dynamicContentMenu({ |