jQuery.sdScrollMenu

A light-weight jQuery plugin to generate a dynamic menu based on <h*> titles within a text.

Releases

• v0.1 - 07/08/2015

Requirements

jQuery.sdScrollMenu requires the latest version of jQuery.

Demo

Follow this JSFiddle link to see the plugin in action.

Features

• supports unlimited number of titles
• highlights titles when scrolling with .active class
• responsive with inner scrollbar and focus on .active elements

Usage

• HTML

First of all, you would need to set the plugin on a large <div> filled with text. For exemple:

<div id="scroll-menu">   <h1>Section 1</h1>   <p>Lorem ipsum ...</p>      <h2>Sub-section 1.1</h2>   <p>Nullam vestibulum ...</p>   <p>Nunc hendrerit ...</p>      <h2>Sub-section 1.2</h2>   <p>Integer feugiat ...</p>      <h3>Sub-section 1.2.1</h3>   <p>Cras porta ...</p>      <h3>Sub-section 1.2.2</h3>   <p>Aenean vestibulum ...</p>      <h1>Section 2</h1>   <p>Cras ullamcorper ...</p>   <!-- and so on --> </div>

• CSS

You would then need to style respectively the .active class and the .active.first class as they are the ones applied to the matching <li> in the menu, like so:

.sdsm-menu li:hover {     color: #146; }  .sdsm-menu li.active.first {     font-weight: bold;     color: #a19d38; }  .sdsm-menu li.active {     color: #a19d38; }

• jQuery

The syntax of jQuery.sdScrollMenu's initialization is the following:

jQuery(function($) {      $('#scroll-menu').sdScrollMenu({         width: 250, // integer: in px         scrollDuration: 500, // integer: in ms         titles: 'h3, h4, h5, h6', // string: jQuery selectors         highlightDuration: 1000, // integer: in ms         highlightColor: '#a19d38' // string: color     });  });

Options

Licence

Copyright (c) 2015 Steve David

Licensed under the MIT license.