Open In App

jQuery Vertical Dot Navigation Plugin

Last Updated : 13 Jul, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

jQuery provides a beautiful, lightweight, single page and responsive Vertical Dot Navigation plugin to programmers that help in navigating or scrolling through long web pages. The plugin identifies the number of pages or sections in the website and accordingly adds dots for click to scroll through the corresponding contents.

Please download the Vertical Dot Navigation Plugin and include the required file libraries in your working folder as shown in the head section of the following codes. Download link: https://github.com/maiamachine/jquery-vertical-dot-navigation

Example 1: In the following example, the very basic call of verticalDotNav() method is shown using jQuery. Different page contents are provided in different sections of the HTML page.

html




<!doctype html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
 
    <title>jQuery Vertical Dot Navigation Plugin</title>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="styles.css">
 
    <!--required stylesheet file of plugin-->
    <link rel="stylesheet"
          href=
"jq-vertical-dot-navigation.css">
 
    <!--Required javascript file dependencies-->
    <script src="jquery.min.js"></script>
    <script src="jq-vertical-dot-nav.js"></script>
 
    <script>
        $(document).ready(function () {
            $('section').verticalDotNav();
 
        })
    </script>
</head>
 
<body>
 
    <section id="section-1" class="row">
        <div class="col-xs-10 col-xs-offset-1">
            <h3>
                jQuery Vertical Dot Navigation Plugin
            </h3>
        </div>
    </section>
    <section id="section-2" class="row">
        <div class="col-xs-8 col-xs-offset-2
                    col-md-6 col-md-offset-3">
            <p>
                  Amazon… “Hire and Develop the Best”.
                One of the Big Four Tech Companies
                founder Jeff Bezos is now the richest
                person on this planet.
                Jeff was an engineer and 25 years ago
                when Jeff pitched his idea of starting
                a business online to his boss David
                (Founder of DE Shaw) it was rejected
                indirectly.Well, Jeff quit the job
                and started Amazon from his
                garage in Seattle Washington.Today
                the company is making billions of
                dollars and fulfilling the customer’s
                needs worldwide in various areas.
            </p>
        </div>
    </section>
    <section id="section-3" class="row">
        <div class="col-xs-10 col-xs-offset-1
                    col-md-6 col-md-offset-3">
            <p>
                  As the placement season is back so are
                we to help you ace the interview. We
                have selected some most commonly asked
                and must do practice problems for you.
                You can also take part in our mock
                placement contests which will help
                you learn different topics and
                practice at the same time, simulating
                the feeling of a real placement
                test environment.
            </p>
        </div>
    </section>
</body>
 
</html>


Output:

Example 2: In the following example, various options of the verticalDotNav() method are set as shown below. Just notice the alignment of dots and scrolling speed in the image output and accordingly customize in your code as per the requirement.

html




<!doctype html>
 
<html lang="en">
 
<head>
    <meta charset="utf-8">
 
    <title>jQuery Vertical Dot Navigation Plugin</title>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="styles.css">
 
    <!--required stylesheet file of plugin-->
    <link rel="stylesheet"
          href="jq-vertical-dot-navigation.css">
 
    <!--Required javascript file dependencies-->
    <script src="jquery.min.js"></script>
    <script src="jq-vertical-dot-nav.js"></script>
 
    <script>
        $(document).ready(function () {
            $('section').verticalDotNav({
                align: "left", // Options are 'right' or 'left'
                scroll_speed: 2500, // The time in milliseconds
                dot_size: 30,
                dot_style: 'circle', // Options are 'circle' or 'square'
                dot_color: "#e9e9e9",
                nav_color: "#000000"
 
            });
        })
    </script>
</head>
 
<body>
 
    <section id="section-1" class="row">
        <div class="col-xs-10 col-xs-offset-1">
            <h3>
                jQuery Vertical Dot Navigation Plugin
            </h3>
        </div>
    </section>
    <section id="section-2" class="row">
        <div class="col-xs-8 col-xs-offset-2
                    col-md-6 col-md-offset-3">
            <p>
               Amazon… “Hire and Develop the Best”.
               One of the Big Four Tech Companies
               founder Jeff Bezos is now the richest
               person on this planet. Jeff was an
               engineer and 25 years ago when Jeff
               pitched his idea of starting a business
               online to his boss David
               (Founder of DE Shaw) it was rejected
               indirectly. Well, Jeff quit the job
               and started Amazon from his garage
               in Seattle Washington. Today the
               company is making billions of dollars
               and fulfilling the customer’s needs
               worldwide in various areas.
            </p>
        </div>
    </section>
    <section id="section-3" class="row">
        <div class="col-xs-10 col-xs-offset-1
                    col-md-6 col-md-offset-3">
            <p> As the placement season is back so
                are we to help you ace the interview.
                We have selected some most commonly
                asked and must do practice problems
                for you. You can also take part in
                our mock placement contests which will
                help you learn different topics and
                practice at the same time,
                simulating the feeling of a real
                placement test environment.
            </p>
        </div>
    </section>
</body>
 
</html>


Output:



Previous Article
Next Article

Similar Reads

How to design page view navigation for mobiles using app-UI plugin?
The purpose of this article is to give interactive user interface components for a mobile design by using app-UI plugin. Here we will be looking into various types of navigation views for web pages. The plugin helps mobile developers creating applications using HTML, CSS, and JavaScript. Please download the required pre-compiled file from the link
5 min read
How to design side navigation for mobile using Sidetap plugin ?
In this article, we will learn how to design side navigation features for mobile web interfaces using Sidetap plugin. This plugin is a very lightweight and platform-independent framework and gives easy-to-use syntax and flexibility. It is completely based on HTML, JavaScript, and CSS. Please download the required pre-compiled file from the link and
2 min read
How to design navigation map for web pages using pagemap plugin ?
In this article, we will learn how to design a mini-map for navigation system with single page website using pagemap plugin. This plugin is totally a HTML, JavaScript and CSS based tool. Please download the pre-compiled library files for code implementation. The developer can fix the position of the map on the screen by the following CSS code. Add
4 min read
How to use Top Navigation with Left Navigation Bar using Bootstrap ?
Bootstrap is an open-source CSS framework used by frontend developers for making interactive web designs. The most recent version of Bootstrap is Bootstrap 5 alpha which has numerous added features. However, Bootstrap 5 is still under constant development phase and hence most of the web developers are still using Bootstrap 4. Bootstrap 4 also offer
5 min read
How to create Vertical Navigation Bar using HTML and CSS ?
After reading this article, you will be able to build your own vertical navigation bar. To follow this article you only need some basic understanding of HTML and CSS. Let us start writing our vertical navigation bar, first, we will write the structure of the navigation bar. In this tutorial, we create the navigation bar using an HTML list item. We
3 min read
How to create a tabbed pills and vertical pills navigation menu in Bootstrap ?
In this article, we will learn about tabbed pills and the vertical pills navigation menu in Bootstrap, &amp; will understand their implementation through the examples. These kinds of navigation menus are used to decorate the navbar in a different fashion with a specific distinct navigation style to enhance the user experience and navigation flow of
4 min read
How to select html element using ID in jQuery when ID contains a dot character ?
The task is to select an HTML element/node by ID using jQuery when the ID itself contains a DOT (' . '). Not only dots(.) there are so many other meta character such as ! " # $ % & ' ( ) * + , . / : ; ? @ [ \ ] ^ ` { | } ~ can be selected by this procedure. Syntax: $('#ID_PREFIX\\.ID_SUFFIX') Approach: In order to select an HTML element by ID we ju
2 min read
jQuery | Page Piling Plugin
jQuery pagePiling.js plug-in is a rich feature available for programmers for piling more than one layout section, one over the other, and accessing each page by URL or mouse scrolling or side bullets navigation. This feature provides all type of smooth vertical, horizontal, and side navigations to the destination anchor links. It also manages callb
5 min read
jQuery | Mask Plugin
jQuery mask is a jQuery plugin that helps in putting on a mask on the basic HTML input fields and other elements. If the developer wants the input field to take inputs in a certain format only, then they can use the jQuery mask plugin for it. This type of functionality can also be created using a back end language like PHP. However, it will be much
3 min read
How to create a jQuery plugin with methods?
Jquery is a Javascript library that is built to design or simplifies HTML, CSS, AJAX, DOM as well as event handling for web development. It is Open Source Software and free to all. More than 10 million websites use jquery. Jquery simply converts a line of javascript into methods that can be called in a single line of code. These plugins are impleme
2 min read