JavaScript ScrollLoopMenu Plugin

In this article, we will learn how to implement the Scrolling Loop Menu using JavaScript based ScrollLoopMenu plugin. It is another type of simple and interactive scrolling menu used in developing web pages for getting some nice visual effects.

Note: Please download the JavaScript ScrollLoopMenu plugin in the working folder and include the required files in the head section of your HTML code.

<link href=”https://use.typekit.net/rtr2vsr.css” rel=”stylesheet” type=”text/css”/>
<link href=”css/base.css” rel=”stylesheet” type=”text/css”/>
<script src=”js/index.js”></script>

Example: The following example demonstrates the scrolling loop menu using HTML controls and JavaScript based ScrollLoopMenu plugin. Different classes like “menu”, “menu__item-inner”, “frame__link” of the of “base.css” file of the plugin are attached to the HTML tags as shown below for the expected output.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport"
              content="width=device-width,
                       initial-scale=1" />
        <title>Scroll Loop Menu Plugin</title>
        <meta name="description"
              content="scroll loop animation." />
        <meta name="keywords" 
              content="Enter keywords in your web page" />
        <link rel="stylesheet"
              href="https://use.typekit.net/rtr2vsr.css" />
        <link rel="stylesheet" 
              type="text/css" 
              href="css/base.css" />
    </head>
    <body>
        <div class="frame">
            <h1 class="frame__title">GFG Scroll Loop Menu</h1>
            <div class="frame__links">
                <a href=
                   class="frame__link">
                    JavaScript
                </a>
                <a href=
                   lass="frame__link">
                    CSS
                </a>
            </div>
            <span class="frame__button"
                  aria-hidden="true">
              Close</span>
        </div>
        <nav class="menu">
            <div class="menu__item">
                <a class="menu__item-inner">
                  Algorithms</a>
            </div>
            <div class="menu__item">
                <a class="menu__item-inner">
                  Data Structures</a>
            </div>
            <div class="menu__item">
                <a class="menu__item-inner">
                  Languages</a>
            </div>
            <div class="menu__item">
                <a class="menu__item-inner">
                  Interview Corner</a>
            </div>
            <div class="menu__item">
                <a class="menu__item-inner">
                  GATE</a>
            </div>
            <div class="menu__item">
                <a class="menu__item-inner">
                  ISRO CS</a>
            </div>
            <div class="menu__item">
                <a class="menu__item-inner">
                  UGC NET CS</a>
            </div>
            <div class="menu__item">
                <a class="menu__item-inner">
                  CS Subjects</a>
            </div>
            <div class="menu__item">
                <a class="menu__item-inner">
                  Web technologies</a>
            </div>
            <div class="menu__item">
                <a class="menu__item-inner">
                  Programming</a>
            </div>
            <div class="menu__item">
                <a class="menu__item-inner">
                  Careers</a>
            </div>
            <div class="menu__item">
                <a class="menu__item-inner">
                  Internship</a>
            </div>
            <div class="menu__item">
                <a class="menu__item-inner">
                  Placement course</a>
            </div>
            <div class="menu__item">
                <a class="menu__item-inner">
                  Geek of the Month</a>
            </div>
        </nav>
        <script src="js/index.js"></script>
    </body>
</html>

chevron_right


    Output:



  • In the beginning:

  • When “div” with link is clicked, it redirects the page to the respective “href” links.

  • The following shows the scrolling menu feature of the ScrollLoopMenu plugin.

full-stack-img




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.