jQuery Plugin For One Page Section Navigation - sectionMenu

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

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 type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.fragmentscroll.min.js"></script>

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

<script type="text/javascript" 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.

<script type="text/javascript">
$(window).load(function() {
$('body').sectionMenu().fragmentScroll();
});
</script>

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