jQuery Plugin For One Page Section Navigation - sectionMenu

File Size: 10.2 KB
Views Total: 6322
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For One Page Section Navigation - sectionMenu

sectionMenu is a jQuery plugin for creating a side navigation which allows you to smoothly scroll through different sections on one page. Great for one page scrolling website. jQuery fragmentScroll plugin is required for the scroll to functionality.

How to use it:

1. Include the required jQuery library and jQuery fragmentScroll plugin in the document.

<script src="jquery.min.js"></script>
<script src="jquery.fragmentscroll.min.js"></script>

2. Include the optional jQuery easing plugin for the easing effects.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

3. Include the jQuery sectionMenu plugin's Javascript and CSS after jQuery library.

<link rel="stylesheet" href="assets/css/jquery.sectionmenu.css" />
<script src="assets/js/jquery.sectionmenu.min.js"></script>

4. Build the Html structure as follows.

<div id="page">
  <section id="home" class="container" data-section-menu="Home">
    <h1>Description</h1>
  </section>
  <section id="section1" class="container" data-section-menu="Section 1">
    <h1>Section 1</h1>
  </section>
  <section id="section2" class="container" data-section-menu="Section 2">
    <h1>Section 2</h1>
  </section>
  <section id="section3" class="container" data-section-menu="Section 3">
    <h1>Section 3</h1>
  </section>
</div>

5. Call the plugin to generate a side navigation.

$(window).load(function() {
  $('body').sectionMenu().fragmentScroll();
});

6. Available options to customize the side navigation.

$('body').sectionMenu({

  // enable/disable title
  enableTitle: true,

  // Element
  element: 'div',
  class: 'section-menu',

  // Insert
  insertBefore: '',
  insertAfter: ''
  
});

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