ES6 Vanilla.js navigation plugin to simple use on one-page websites.

http://qmixi.github.io/slide-nav

Basic Example

###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>

Initialization:

var nav = new SlideNav();

More complex example

###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>

Initialization:

var nav = new SlideNav({
    activeClass: "active",
	toggleButtonSelector: '.hamburger',
	toggleBoxSelector: '.nav',
	hideAfterSelect: false,
	speed: 100  //default 250
});

License

The credit comments in the JavaScript files should be kept intact

(The MIT License)

Copyright (c) 2017 Piotr Kumorek <[email protected]>