jQuery Vertical Dot Navigation Plugin

Last Updated : 30 Jul, 2024

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:

jQuery Vertical Dot Navigation Plugin

geetanjali16

Improve

Article Tags :

jQuery Vertical Dot Navigation Plugin

Similar Reads

Thank You!

What kind of Experience do you want to share?