Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

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>

About

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

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.