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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
marquee menu effect

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.