Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

JavaScript ScrollLoopMenu Plugin

  • Last Updated : 18 Aug, 2020

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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






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




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!