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%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:

Explore