Skip to content

Instantly share code, notes, and snippets.

@thatdevgirl
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.
This simple mega navigation menu is inspired by the many mega menus on retail and other websites.
<!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>
/*
* -- 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