Skip to content

Instantly share code, notes, and snippets.

@thatdevgirl

thatdevgirl/css-mega-menu-example.html

Created December 19, 2019 20:10
Show Gist options
  • Save thatdevgirl/977f9bb9282841143f88e56143803984 to your computer and use it in GitHub Desktop.
Save thatdevgirl/977f9bb9282841143f88e56143803984 to your computer and use it in GitHub Desktop.
Download ZIP
This simple mega navigation menu is inspired by the many mega menus on retail and other websites.
Raw
css-mega-menu-example.html
<!DOCTYPE html>
<html>
<head>
<title>CSS Mega-Menu</title>
<link type="text/css" rel="stylesheet" href="css-mega-menu.css" />
</head>
<body>
<nav>
<ul class="first">
<li class="active"><a href="#">Shop My Store</a></li>
<li><a href="#">Outlets</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="second">
<li>
<a href="#">Clothing</a>
<article>
<section>
<h2>Women's Clothing</h2>
<p><a href="#">Shirts</a></p>
<p><a href="#">Pants</a></p>
<p><a href="#">Skirts</a></p>
<p><a href="#">Dresses</a></p>
<p><a href="#">Suits</a></p>
</section>
<section>
<h2>Men's Clothing</h2>
<p><a href="#">Shirts</a></p>
<p><a href="#">Pants</a></p>
<p><a href="#">Suits</a></p>
<p><a href="#">Ties</a></p>
</section>
<section>
<h2>Kids's Clothing</h2>
<p><a href="#">Shirts</a></p>
<p><a href="#">Pants</a></p>
<p><a href="#">Skirts</a></p>
<p><a href="#">Suits</a></p>
</section>
<section class="banner">
<img src="http://placekitten.com/g/150/150" />
</section>
</article>
</li>
<li>
<a href="#">Accessories</a>
<article>
<section>
<h2>Outerwear</h2>
<p><a href="#">Coats</a></p>
<p><a href="#">Hats</a></p>
<p><a href="#">Scarves</a></p>
<p><a href="#">Gloves</a></p>
</section>
<section>
<h2>Jewelry</h2>
<p><a href="#">Necklaces</a></p>
<p><a href="#">Bracelets</a></p>
<p><a href="#">Rings</a></p>
<p><a href="#">Watches</a></p>
</section>
<section>
<h2>Bags</h2>
<p><a href="#">Handbags</a></p>
<p><a href="#">Totes</a></p>
<p><a href="#">Luggage</a></p>
<p><a href="#">Wallets</a></p>
<p><a href="#">Keychains</a></p>
</section>
</article>
</li>
<li>
<a href="#">Shoes</a>
<article>
<section>
<h2>Women's Shoes</h2>
<p><a href="#">Flats</a></p>
<p><a href="#">Heels</a></p>
<p><a href="#">Boots</a></p>
<p><a href="#">Sneakers</a></p>
</section>
<section>
<h2>Men's Shoes</h2>
<p><a href="#">Loafers</a></p>
<p><a href="#">Dress Shoes</a></p>
<p><a href="#">Boots</a></p>
<p><a href="#">Sneakers</a></p>
</section>
<section class="banner">
<img src="http://placekitten.com/150/150" />
</section>
</article>
</li>
<li>
<a href="#">Kitchen</a>
<article>
<section>
<h2>Tableware</h2>
<p><a href="#">Plates</a></p>
<p><a href="#">Glasses</a></p>
<p><a href="#">Mugs</a></p>
<p><a href="#">Silverware</a></p>
</section>
<section>
<h2>Serveware</h2>
<p><a href="#">Trays</a></p>
<p><a href="#">Bowls</a></p>
<p><a href="#">Platters</a></p>
</section>
<section>
<h2>Cookware</h2>
<p><a href="#">Pots</a></p>
<p><a href="#">Pans</a></p>
<p><a href="#">Utensils</a></p>
</section>
<section>
<h2>Appliances</h2>
<p><a href="#">Coffee Makers</a></p>
<p><a href="#">Mixers</a></p>
<p><a href="#">Blenders</a></p>
<p><a href="#">Gadgets</a></p>
</section>
</article>
</li>
<li>
<a href="#">Bed & Bath</a>
<article>
<section>
<h2>Bed Sheets</h2>
<p><a href="#">Twin</a></p>
<p><a href="#">Full</a></p>
<p><a href="#">Queen</a></p>
<p><a href="#">King</a></p>
</section>
<section>
<h2>Towels</h2>
<p><a href="#">Bath Towels</a></p>
<p><a href="#">Hand Towels</a></p>
<p><a href="#">Tea Towels</a></p>
<p><a href="#">Washcloths</a></p>
</section>
</article>
</li>
</ul>
</nav>
</body>
</html>
Raw
css-mega-menu.css
/*
* -- CSS-only Mega Menu
*
*/
nav { width: 100%; }
nav a { text-decoration: none; }
/* -- Navigation menu - common styles for first and second levels -- */
nav > ul { clear: both; width: 100%; }
nav > ul li { float: left; }
nav > ul li > a { display: block; }
/* -- Navigation menu - first level -- */
nav > ul.first li > a { background: #DDD; border-left: 1px solid #BBB; color: #000; padding: 10px 30px 15px 30px; text-transform: uppercase; }
nav > ul.first li > a:hover { background: #CCC; }
nav > ul.first li:first-child > a { border-left: 0; }
nav > ul.first li.active > a { background: #444; color: #FFF; }
/* -- Navigation menu - second level -- */
nav > ul.second { background: #444; border: 1px solid #444; display: block; height: 25px; position: relative; }
nav > ul.second li > a { color: #FFF; padding: 7px 30px; }
nav > ul.second li:hover > a { background: #FFF; color: #000; }
/* -- Navigation menu - third level -- */
nav > ul.second article { display: none; }
nav > ul.second li:hover > article { border: solid #444; border-width: 0 1px 1px 1px; display: block; left: 0; margin-left: -1px; position: absolute; width: 100%; }
nav section { float: left; margin-right: 20px; padding: 20px; }
nav section h2 { font-weight: bold; margin: 5px 0; text-transform: uppercase; }
nav section p { margin: 8px 0; }
nav section a { color: #000; }
nav section a:hover { text-decoration: underline; }
nav section.banner { float: right; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment