slide-nav ES6 vanilla.js Navigation plugin for simple use on one-page websites. Smooth scrolling and scrolling are also supported.

Must Read: Change Web Sections to One Page Scrolling Effect In JavaScript Plugin | docSlider.js

ES6 Vanilla.js Navigation Plugin

How to make use of it:

1. Create a navigation menu with anchor links pointing to the content sections within your HTML document.

<div class="nav">
  <nav>
    <a href="#section1">Link to section 1</a>
    <a href="#section2">Link to section 2</a>
    <a href="#section3">Link to section 3</a>
    <a href="#section4">Link to section 4</a>
  </nav>
</div>

<div id="section1" class="section">
  <div class="text-wr">
    <h1 class="title">
      <div class="title-top">Slide 1</div>
      <div class="title-tx">This is slide 1</div>
    </h1>
  </div>
</div>
<div id="section2" class="section">
  <div class="text-wr">
    <div class="title-top">Slide 2</div>
    <div class="title-tx">This is slide 2</div>
  </div>
</div>
<div id="section3" class="section">
  <div class="text-wr">
    <div class="title-top">Slide 3</div>
    <div class="title-tx">This is slide 3</div>
  </div>
</div>
<div id="section4" class="section">
  <div class="text-wr">
    <div class="title-top">Slide 4</div>
    <div class="title-tx">This is slide 4</div>
  </div>
</div>

2. Design the navigation and pin it to the top of the web page when scrolling.

.nav {
  position: fixed; /*left: 50%;*/
  width: 100%;
  top: 20px;
  z-index: 9;
  padding-left: 10px;
}
.nav a {
  padding: 7px 20px;
  border-radius: 7px;
  margin-right: 10px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  text-decoration: none;
  color: black;
  font-family: sans-serif, arial;
  font-weight: 100;
}
.nav a.active {
  background: rgba(0, 0, 0, 0.5);
  color: white;
}
.nav a:hover { background: rgba(255, 255, 255, 0.7); }

3. Import the main JavaScript file slideNav.js into the document.

<script src="dist/slideNav.js"></script>

4. Active single-page scrolling.

window.slide = new SlideNav();

5. All possible options that can be passed as a JS object to SlideNav():

var nav = new SlideNav({
    activeClass: "active",
    toggleButtonSelector: false,
    toggleBoxSelector: false,
    hideAfterSelect: true,
    speed: 70,
    changeHash: false,
    navBoxToggleClass: false
});

See Demo And Download

Official Website(qmixi): Click Here

This superior jQuery/javascript plugin is developed by qmixi. For extra advanced usage, please go to the official website.