In this article, we will learn how to implement the marquee effect for a menu using CSS MarqueeMenu plugin. Marquee is a type of animation effect used in developing web pages for getting some attractive text or image scrolling in vertical or horizontal directions.
Note: Please download the CSS MarqueeMenu plugin in the working folder and include the required files in the head section of your HTML code.
<link href=”https://use.typekit.net/zhq0vyf.css” rel=”stylesheet” type=”text/css”/>
<link href=”css/base.css” rel=”stylesheet” type=”text/css”/>
Example: The following example demonstrates the marquee effect for the given menu using HTML controls and CSS based MarqueeMenu plugin. Different classes like “marquee”, “marquee__inner”, “menu__item-link” of the “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 >CSS-only Marquee Menu Effect </ title >
< meta name="description"
content="A menu with a css-only marquee hover effect" />
< link rel="stylesheet"
< link rel="stylesheet"
type="text/css"
href="css/base.css" />
< style >
body{
text-align:center;
}
</ style >
</ head >
< body class="demo-1">
< h2 style="color:green">GeeksForGeeks</ h2 >
< b >Marquee Menu Effect using CSS</ b >
< main >
< nav class="menu">
< div class="menu__item">
< a class="menu__item-link">Links</ a >
< img class="menu__item-img"
src="img/background1.jpg"
alt="geeks image"/>
< div class="marquee">
< div class="marquee__inner"
aria-hidden="true">
< span >Hyperlinks</ span >
< span >Hypertexts</ span >
< span >Hypermedia</ span >
< span >Graphics</ span >
</ div >
</ div >
</ div >
< div class="menu__item">
< a class="menu__item-link">HTML</ a >
< img class="menu__item-img"
src="img/background2.jpg"
alt="gfg image"/>
< div class="marquee">
< div class="marquee__inner"
aria-hidden="true">
< span >Attributes</ span >
< span >Paragraphs</ span >
< span >Head</ span >
< span >Tables</ span >
< span >Lists</ span >
</ div >
</ div >
</ div >
< div class="menu__item">
< a class="menu__item-link">CSS</ a >
< img class="menu__item-img"
src="img/background3.jpg"
alt="GFG image"/>
< div class="marquee">
< div class="marquee__inner"
aria-hidden="true">
< span >Inline styles</ span >
< span >External CSS</ span >
< span >Internal CSS</ span >
</ div >
</ div >
</ div >
< div class="menu__item">
< a class="menu__item-link">Geeks</ a >
< img class="menu__item-img"
src="img/geeksimage1.png"
alt="GFG image"/>
< div class="marquee">
< div class="marquee__inner"
aria-hidden="true">
< span >PHP</ span >
< span >jQuery</ span >
< span >Algorithm</ span >
< span >JavaScript</ span >
< span >MySQL</ span >
</ div >
</ div >
</ div >
< div class="menu__item">
< a class="menu__item-link">GeeksWeek</ a >
< img class="menu__item-img"
src="img/gfg2.jpg"
alt="gfg image"/>
< div class="marquee">
< div class="marquee__inner"
aria-hidden="true">
< span >GeeksWeek</ span >
< span >Contact</ span >
< span >GeeksWeek</ span >
< span >Contest</ span >
</ div >
</ div >
</ div >
</ nav >
</ main >
</ body >
</ html >
|
Output: