jQuery Menu With Dots Plugin

1. Introduction

jquery-vertical-dot-navigation is a jQuery plugin for vertical navigation with dots. The plugin fits into the latest trend of building simple one page websites with vertical nativation.

2. Plugin Overview

Demo

3. How to install and use jquery-vertical-dot-navigation jQuery plugin

Follow the below steps to install jquery-vertical-dot-navigation jQuery plugin on your website.

3.1. Load the jQuery and jquery-vertical-dot-navigation CSS and JavaScript file into HTML document:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

<!-- Dot Navigation JS -->
<script src="js/script.js"></script>

<!-- Dot Navigation CSS -->
<link rel="stylesheet" href="css/style.css">

3.3. Create sections and navigation panel:

<section class="sec1"></section>
<section class="sec2"></section>
<section class="sec3"></section>
<section class="sec4"></section>
<nav>
    <ul>
        <li class="dot1" id="ec1"></li>
        <li class="dot2" id="ec2"></li>
        <li class="dot3" id="ec3"></li>
        <li class="dot4" id="ec4"></li>
    </ul>
</nav>

4. Conclusion

In this article, we presented jquery-vertical-dot-navigation jQuery plugin that can be used to create a navigation panel to the website sections. The plugin is very simple and requires minimum configuration.