jQuery | Vertical Dot Navigation Plugin

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 HTML page.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right





My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.