Fixed Table of Contents Drop-Down Menu (jQuery Plugin)

About a week or so ago, I stumbled across the Startups, This Is How Design Works website. It’s a one-page site that uses a fixed drop-down menu at the top of the screen that collapses/expands in a “table of contents” style.

I thought it was kinda cool, so I wrote my own script to create this functionality, and I turned it into a jQuery plugin. Use the button below to view the demo, and read on for a description.

• View Demo

You can also view the alternate demo that doesn’t use submenus.

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:

// call the plugin on the "#toc" element
$('#toc').fixedTOC({
	menuOpens: 'click',
	scrollSpeed: 1000,
	menuSpeed: 300,
	useSubMenus: true,
	resetSubMenus: true,
	topLinkWorks: true
});

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 click and mouseenter.

scrollSpeed
Speed of the animated scrolling, in milliseconds.

menuSpeed
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 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 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 false.

Each of the hyperlinks in the menu needs to correspond to an ID on the page for the in-page-scroll part to actually work. And my demo is also responsive and slightly changes the look of the menu and “top” link on a small screen (although I haven’t really done too much testing for this).

If you have any suggestions or feedback, comment below or open an issue on the GitHub repo. I suppose it would be cool to expand the script to be able to parse the HTML and create the drop-down menu automatically like this script does. Also, I haven’t done anything special in the CSS to deal with JavaScript-off users, but you could easily add a “no-js” class to the body and use that CSS hook to do some stuff when JavaScript is off, and remove the class when JavaScript is on (as Modernizr does).

• View Demo

• Download Code

Source : http://www.impressivewebs.com/fixed-table-of-contents-drop-down-menu-jquery-plugin