🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

sectionMenu is a jQuery plugin for creating a side navigation which allows you to smoothly scroll through different sections on one page.

One-Page-Scrolling

Documentation

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: '' });

You May Also Like