Instantly share code, notes, and snippets.
thatdevgirl/css-mega-menu-example.html
Created Dec 19, 2019
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