Side Navigation For One Page Scroll Website – dot-nav

Category: Javascript , Menu & Navigation | October 30, 2018
Author: piersrueb
Views Total: 483
Official Page: Go to website
Last Update: October 30, 2018
License: MIT

Preview:

Side Navigation For One Page Scroll Website – dot-nav

Description:

The dot-nav JavaScript library automatically generates a vertical side navigation for one page scrolling website.

Clicking on the navigation bullets will smoothly scroll through page sections with easing support.

How to use it:

Download the zip and import the dot-nav-min.js file into the document.

<script src="dot-nav-min.js"></script>

Add page sections together with the dot navigation to the webpage.

<nav id="dot-nav"></nav>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>

Initialize the dot-nav and specify the easing function you want to use. All available easing functions:

  • linear
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
dotNav('section', 'easeInOutCubic');

Apply your own styles to the navigation bullets.

nav#dot-nav {
  position: fixed;
  right: 20px;
  top: 20px;
}

nav#dot-nav a {
  border: 1px solid #121212;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  display: block;
  margin: 10px;
}

nav#dot-nav a.active, nav#dot-nav a:first-child {
  background: #121212;
}

You Might Be Interested In:

Leave a Reply