jQuery.sectionMenu
The jQuery section menu plugin creates a side menu that allows you to scroll to the different sections on the page. Check the demo for more information.
Example
HTML
<html> <body> <section id="home" data-section-menu="Home"> <p>Home</p> </section> <section id="about" data-section-menu="About"> <p>About</p> </section> <section id="contact" data-section-menu="Contact"> <p>Contact</p> </section> </body> </html>
CSS
<link rel="stylesheet" href="assets/css/jquery.sectionmenu.css" />
Javascript
<script type="text/javascript" src="https://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> <script type="text/javascript" src="assets/js/jquery.sectionmenu.min.js"></script> <script type="text/javascript"> $(window).load(function() { $('body').sectionMenu().fragmentScroll(); }); </script>
Options
$('body').sectionMenu({ // Show title in the menu enableTitle: true, // Outer element element: 'nav', // Class and data- name class: 'section-menu', // Insert content before the menu insertBefore: '', // Insert content after the menu insertAfter: '' });