ES6 Vanilla.js navigation plugin to simple use on one-page websites.
https://qmixi.github.io/slide-nav
###Sample Markup:
<nav> <a href="#section1>Link to section1</a> <a href="#section2>Link to section2</a> <a href="#section3>Link to section3</a> <a href="#section4>Link to section4</a> </nav> <div id="section1"> <h1 class="title">Section 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p> </div> <div id="section2"> <h1 class="title">Section 2</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p> </div> <div id="section3"> <h1 class="title">Section 3</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p> </div> <div id="section4"> <h1 class="title">Section 4</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p> </div>
var nav = new SlideNav();
###Sample Markup:
<div class="hamburger"> <div class="hamburger-line"></div> <div class="hamburger-line"></div> <div class="hamburger-line"></div> </div> <div class="nav"> <nav> <a href="#section1>Link to section1</a> <a href="#section2>Link to section2</a> <a href="#section3>Link to section3</a> <a href="#section4>Link to section4</a> </nav> </div> <div id="section1"> <h1 class="title">Section 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p> </div> <div id="section2"> <h1 class="title">Section 2</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p> </div> <div id="section3"> <h1 class="title">Section 3</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p> </div> <div id="section4"> <h1 class="title">Section 4</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p> </div>
var nav = new SlideNav({ activeClass: "active", toggleButtonSelector: '.hamburger', toggleBoxSelector: '.nav', hideAfterSelect: false, speed: 100 //default 250 });
The credit comments in the JavaScript files should be kept intact
(The MIT License)
Copyright (c) 2017 Piotr Kumorek <[email protected]>