ES6 Vanilla.js navigation plugin to simple use on one-page websites.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
README.md
gulpfile.js
index.html
package.json
style.css

README.md

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 <contact.piotrkumorek@gmail.com>