slide-nav ES6 vanilla.js Navigation plugin for simple use on one-page websites. Smooth scrolling and scrolling are also supported.
Must Read: Change Web Sections to One Page Scrolling Effect In JavaScript Plugin | docSlider.js
ES6 Vanilla.js Navigation Plugin
Post Name | One Page Scroll Website Template |
Author Name | qmixi |
Category | Menu Plugins, Scrolling |
Official Page | Click Here | Click Here |
Official Website | github.com |
Publish Date | April 7, 2022 |
Last Update | August 2, 2023 |
Download | Link Below |
License | MIT |
How to make use of it:
1. Create a navigation menu with anchor links pointing to the content sections within your HTML document.
<div class="nav"> <nav> <a href="#section1">Link to section 1</a> <a href="#section2">Link to section 2</a> <a href="#section3">Link to section 3</a> <a href="#section4">Link to section 4</a> </nav> </div>
<div id="section1" class="section"> <div class="text-wr"> <h1 class="title"> <div class="title-top">Slide 1</div> <div class="title-tx">This is slide 1</div> </h1> </div> </div> <div id="section2" class="section"> <div class="text-wr"> <div class="title-top">Slide 2</div> <div class="title-tx">This is slide 2</div> </div> </div> <div id="section3" class="section"> <div class="text-wr"> <div class="title-top">Slide 3</div> <div class="title-tx">This is slide 3</div> </div> </div> <div id="section4" class="section"> <div class="text-wr"> <div class="title-top">Slide 4</div> <div class="title-tx">This is slide 4</div> </div> </div>
2. Design the navigation and pin it to the top of the web page when scrolling.
.nav { position: fixed; /*left: 50%;*/ width: 100%; top: 20px; z-index: 9; padding-left: 10px; } .nav a { padding: 7px 20px; border-radius: 7px; margin-right: 10px; background: rgba(255, 255, 255, 0.5); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; text-decoration: none; color: black; font-family: sans-serif, arial; font-weight: 100; } .nav a.active { background: rgba(0, 0, 0, 0.5); color: white; } .nav a:hover { background: rgba(255, 255, 255, 0.7); }
3. Import the main JavaScript file slideNav.js into the document.
<script src="dist/slideNav.js"></script>
4. Active single-page scrolling.
window.slide = new SlideNav();
5. All possible options that can be passed as a JS object to SlideNav():
var nav = new SlideNav({ activeClass: "active", toggleButtonSelector: false, toggleBoxSelector: false, hideAfterSelect: true, speed: 70, changeHash: false, navBoxToggleClass: false });
See Demo And Download

Official Website(qmixi): Click Here
This superior jQuery/javascript plugin is developed by qmixi. For extra advanced usage, please go to the official website.