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.
html
<!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 =
< 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 =
c 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.
Last Updated :
13 Jul, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...