jQuery Plugin To Transform Scrollbar Into Awesome Scroll Menu

File Size: 991 KB
Views Total: 2393
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Transform Scrollbar Into Awesome Scroll Menu

ScrollMenu is a lightweight, touch-enabled jQuery plugin for creating an awesome scroll menu to replace your old boring scrollbar.

Key Features:

  • Transforms your scroll bar to awesome scroll menu.
  • Single page navigation menu and scroll bar binds together.
  • It gives a user sense of where they are in a page and how long is that section.
  • With a high customizability of plugin you can have a unique user experience.
  • Allow templating for menu content.
  • Styling is seperated out to css, so you can change look of scrollMenu to have uniqueness.
  • Uses native scroll and can be easily hooked with any custom scroll.

Basic usage:

1. Include the jQuery ScrollMenu plugin's stylesheet in the head of the document.

<link rel="stylesheet" href="scrollmenu.css">

2. Include jQuery JavaScript library and the jQuery ScrollMenu plugin's script at the bottom of the document.

<script src="jquery.js"></script>
<script src="scrollmenu.js"></script>

3. The JavaScript to generate an awesome scroll menu appended to a specified container.

var scrollMenu = ScrollMenu(container, options);

4. Default plugin settings.

{

  sectionClass: 'section',

  //can be vertical or horizontal and horizontal-menu
  menuType: 'vertical', 

  //defaults to container
  appendTo: null, 

  animateOnScroll: true,
  nativeScroll: true,
  scrollbarVisible: false,
  onhover: voidFun,
  onhoverOut: voidFun,
  onscrollToSection: voidFun,

  // a callback to modify menu or add interaction after its been added to menu
  menuMod: voidFun, 

  anchorSetup: [],
  animationDuration: 600,
  scrollAnchorSpacing: 10

};

About Author:

Author: Sudhanshu Yadav

Website: http://ignitersworld.com/lab/scrollmenu/


This awesome jQuery plugin is developed by s-yadav. For more Advanced Usages, please check the demo page or visit the official website.