Side Navigation For One Page Scroll Website – dot-nav

Preview:

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;
}