expanding table contents - Free Download Auto Expanding Table Of Contents Plugin - Dynamic Content Menu

Free Download Auto Expanding Table Of Contents Plugin – Dynamic Content Menu

Posted on

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.

expanding table contents - Free Download Auto Expanding Table Of Contents Plugin - Dynamic Content Menu
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.