This time I will share jQuery Plugin and tutorial about Responsive Off-canvas Navigation With Smooth Scroll Integration, hope it will help you in programming stack.
A sticky, responsive, mobile-friendly navigation system for your cross-platform web app which turns the regular navbar into an off-canvas side menu with a hamburger toggle button on the mobile device.
It also comes with a basic smooth scroll functionality that enables the user to smoothly scroll through your web app by clicking/tapping the menu items.
How to use it:
1. To get started, import the navMain.css and nav.js into the document.
1 |
<link rel="stylesheet" href="/path/to/navMain.css"> |
2 |
<script src="/path/to/jquery.min.js"></script> |
3 |
<script src="/path/to/nav.js"></script> |
2. Create a navbar containing the logo, hamburger toggle button, and anchor links pointing to the page sections within the document.
06 |
<li><a href="#section1" class="scroll">Home</a></li> |
07 |
<li><a href="#section2" class="scroll">About</a></li> |
08 |
<li><a href="#section3" class="scroll">Contact</a></li> |
10 |
<div class = "navdropdown"> |
11 |
<div class="line1"></div> |
12 |
<div class="line2"></div> |
13 |
<div class="line3"></div> |
3. Add unique IDs to page sections as follows. That’s it.
1 |
<div class="content" id="section1"> |
4 |
<div class="content" id="section2"> |
7 |
<div class="content" id="section3"> |
This awesome jQuery plugin is developed by Killian264. For more Advanced Usages, please check the demo page or visit the official website.
