Skip to content

qmixi/slide-nav

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

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

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

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published