Simple, lite and easy to use plugin for jQuery that lets you to create vertical dot navigation with smooth scroll effect.
How to Use Vertical Dot Navigation :
1. Load the jQuery and
<!-- 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">
section element with the following classes and put your contents in them.
<section class="sec1"> <!-- Your contents --> </section> <section class="sec2"> <!-- Your contents --> </section> <section class="sec3"> <!-- Your contents --> </section> <section class="sec4"> <!-- Your contents --> </section>
3. After that, create
nav element that contains list of dots that will be used to navigate sections with smooth scrolling.
<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>
Related Code Snippets:
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.