The HTML is structured using unordered nested lists. I suppose I could have used ordered lists to facilitate maintainable numbering, but I thought it was fine this way and if someone wants to use ordered lists they can just alter the markup and make a small change in the script.
After you include the plugin in your page, here’s how you use it:
1 | // call the plugin on the "#toc" element |
2 | $('#toc').fixedTOC({ |
3 | menuOpens: 'click', |
4 | scrollSpeed: 1000, |
5 | menuSpeed: 300, |
6 | useSubMenus: true, |
7 | resetSubMenus: true, |
8 | topLinkWorks: true |
9 | }); |
The default settings are shown above. You don’t actually have to include any of these, this is just so you can see the available customizable options. And here’s a description of what they do:
menuOpens
The jQuery event that will open the menu. The two most logical options are
The jQuery event that will open the menu. The two most logical options are
click and mouseenter.
scrollSpeed
Speed of the animated scrolling, in milliseconds.
Speed of the animated scrolling, in milliseconds.
menuSpeed
Speed of the “dropping” menu and submenus, in milliseconds.
Speed of the “dropping” menu and submenus, in milliseconds.
useSubMenus
If your menu doesn’t have any nested lists, which means no “submenus”, then set this to
If your menu doesn’t have any nested lists, which means no “submenus”, then set this to
false. This will cause the main menu links to become active. By default, the main menu links don’t scroll to anywhere, they just open the submenus.
resetSubMenus
By default, each time you mouse off the menu, the menu collapses and any active submenu also collapses. If you want to keep the active submenu open, set this to
By default, each time you mouse off the menu, the menu collapses and any active submenu also collapses. If you want to keep the active submenu open, set this to
false.
topLinkWorks
Finally, if your page doesn’t include the “top” link (which appears on the demo in the bottom right area of the page, letting the user scroll back to the top), set this to
Finally, if your page doesn’t include the “top” link (which appears on the demo in the bottom right area of the page, letting the user scroll back to the top), set this to
false.