CSS MarqueeMenu Plugin Last Updated : 15 Jul, 2025 Comments Improve Suggest changes Like Article Like Report 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%E2%80%9D 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. 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>CSS-only Marquee Menu Effect </title> <meta name="description" content="A menu with a css-only marquee hover effect" /> <link rel="stylesheet" href="https://use.typekit.net/zhq0vyf.css"> <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: Comment More infoAdvertise with us Next Article CSS Stacking Page Plugin G geetanjali16 Follow Improve Article Tags : Web Technologies CSS CSS-Advanced Similar Reads jQuery CLNDR Plugin jQuery provides a front-end calendar CLNDR plugin using HTML templates mostly used in single-day or multiple days event management system. It is used in appointing dates of various events in the calendar format. You have to download the required files in the working folder so that the programmer can 4 min read CSS Stacking Page Plugin In this article, we will learn how to implement the stacking pages effect for a website interface using CSS codyhouse-framework plugin. It is a type of stacking web page style used in developing web pages for including some attractive interactive interface. It provides a light-weight interface or fr 3 min read Primer CSS Select Menu Header Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by 2 min read Primer CSS Theming Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and colour. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by 2 min read jQuery Blockrain.js Plugin jQuery plugins enhance an application with features that would generally take a long time to program correctly. However, some plugins are useful in providing entertainment to users. Although many professional sites may not need these, it is a fun feature to include in personal blogs and websites. Bl 3 min read jQuery Plugins Introduction Plugins are the section of code and these codes are written in a JavaScript file. These JavaScript files are used to provide jQuery methods that work together with jQuery library methods. You can download jQuery plug-in from https://plugins.jquery.com/ How to create a jQuery plugin with methods: In 2 min read Like