Side Navigation For One Page Scroll Website – dot-nav

Category: Javascript , Menu & Navigation | October 30, 2018
Author: piersrueb
Views Total: 1,267
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:


2 thoughts on “Side Navigation For One Page Scroll Website – dot-nav

  1. Anita Duskova

    Hi-
    thank you so much for the code. I’m a total beginner and still managed to get through the instructions and get it working, so thank you! Any way I should cite you? I ain’t taking credit for this magic 😀

    Reply

Leave a Reply