CSS MarqueeMenu Plugin
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 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 >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: