| Author: | raj03kumar |
|---|---|
| Views Total: | 1,905 views |
| Official Page: | Go to website |
| Last Update: | February 24, 2023 |
| License: | MIT |
Preview:
Description:
A fully responsive, mobile-friendly dropdown mega navigation written in JavaScript, CSS, and Material Icons.
It automatically transforms the navbar into a vertical accordion menu with a hamburger button for a better experience on mobile devices.
How to use it:
1. Load the needed JavaScript and CSS files in the document.
<link rel="stylesheet" href="style.css" /> <script src="main.js"></script>
2. Code the HTML for the mega menu.
<nav class="navbar">
<a href="#" class="brand">Brand</a>
<div class="menu-container">
<ul class="mega-menu">
<li class="dropdown">
<div>
<span>New Releases</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="menu">
<li>
<a href="#">New Releases</a>
</li>
<li class="sub-dropdown">
<div>
<span>Featured</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">Featured</a>
</li>
<li>
<a href="#">Shop All New Arrivals</a>
</li>
<li>
<a href="#">SKNRS Launch Calendar</a>
</li>
</ul>
</li>
</ul>
</li>
<!-- Mens -->
<li class="dropdown">
<div>
<span>Men</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="menu">
<li>
<a href="#">Men</a>
</li>
<li class="sub-dropdown">
<div>
<span>Featured</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">Featured</a>
</li>
<li>
<a href="#">New Releases</a>
</li>
<li>
<a href="# ">SKNRS Launch Calendar</a>
</li>
<li>
<a href="#">Bestsellers</a>
</li>
</ul>
</li>
<li class="sub-dropdown">
<div>
<span>Shoes</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">All Shoes</a>
</li>
<li>
<a href="#">Lifestyle</a>
</li>
<li>
<a href="#">Jordan</a>
</li>
<li>
<a href="#">Running</a>
</li>
<li>
<a href="#">Football</a>
</li>
<li>
<a href="#">Basketball</a>
</li>
<li>
<a href="#">Training and Gym</a>
</li>
<li>
<a href="#">Skateboarding</a>
</li>
</ul>
</li>
<li class="sub-dropdown">
<div>
<span>Clothing</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">All Clothing</a>
</li>
<li>
<a href="#">Lyfestyle</a>
</li>
<li>
<a href="#">Tops and T-Shirts</a>
</li>
<li>
<a href="#">Hoodies and Sweatshirts</a>
</li>
<li>
<a href="#">Shorts</a>
</li>
<li>
<a href="#">Tracksuits</a>
</li>
<li>
<a href="#">Trousers and Tights</a>
</li>
<li>
<a href="#">Jackets</a>
</li>
<li>
<a href="#">Kits and Jerseys</a>
</li>
</ul>
</li>
<li class="sub-dropdown">
<div>
<span>Shop By Sport</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">All Sports</a>
</li>
<li>
<a href="#">Running</a>
</li>
<li>
<a href="#">Football</a>
</li>
<li>
<a href="#">Basketball</a>
</li>
<li>
<a href="#">Training and Gym</a>
</li>
<li>
<a href="#">Tennis</a>
</li>
<li>
<a href="#">Golf</a>
</li>
</ul>
</li>
<li class="sub-dropdown">
<div>
<span>Accessories</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">All Accessories</a>
</li>
<li>
<a href="#">Bags and Backpacks</a>
</li>
<li>
<a href="#">Socks</a>
</li>
</ul>
</li>
</ul>
</li>
<!-- Women section -->
<li class="dropdown">
<div>
<span>Women</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="menu">
<li>
<a href="#">Women</a>
</li>
<li class="sub-dropdown">
<div>
<span>Featured</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">Featured</a>
</li>
<li>
<a href="#">New Releases</a>
</li>
<li>
<a href="# ">SKNRS Launch Calendar</a>
</li>
<li>
<a href="#">Bestsellers</a>
</li>
</ul>
</li>
<li class="sub-dropdown">
<div>
<span>Shoes</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">All Shoes</a>
</li>
<li>
<a href="#">Lifestyle</a>
</li>
<li>
<a href="#">Jordan</a>
</li>
<li>
<a href="#">Running</a>
</li>
<li>
<a href="#">Training and Gym</a>
</li>
</ul>
</li>
<li class="sub-dropdown">
<div>
<span>Clothing</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">All Clothing</a>
</li>
<li>
<a href="#">Lyfestyle</a>
</li>
<li>
<a href="#">Tops and T-Shirts</a>
</li>
<li>
<a href="#">Hoodies and Sweatshirts</a>
</li>
<li>
<a href="#">Leggings</a>
</li>
<li>
<a href="#">Trousers</a>
</li>
<li>
<a href="#">Shorts</a>
</li>
<li>
<a href="#">Tracksuits</a>
</li>
<li>
<a href="#">Sports Bra</a>
</li>
<li>
<a href="#">Matching Sets</a>
</li>
<li>
<a href="#">Jackets</a>
</li>
<li>
<a href="#">Skirts and Dresses</a>
</li>
</ul>
</li>
<li class="sub-dropdown">
<div>
<span>Shop By Sport</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">All Sports</a>
</li>
<li>
<a href="#">Running</a>
</li>
<li>
<a href="#">Yoga</a>
</li>
<li>
<a href="#">HandBall</a>
</li>
<li>
<a href="#">Training and Gym</a>
</li>
<li>
<a href="#">Tennis</a>
</li>
<li>
<a href="#">Golf</a>
</li>
</ul>
</li>
<li class="sub-dropdown">
<div>
<span>Accessories</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">All Accessories</a>
</li>
<li>
<a href="#">Bags and Backpacks</a>
</li>
<li>
<a href="#">Socks</a>
</li>
</ul>
</li>
</ul>
</li>
<!-- Kids section -->
<li class="dropdown">
<div>
<span>Kids</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="menu">
<li>
<a href="#">Kids</a>
</li>
<li class="sub-dropdown">
<div>
<span>Featured</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">Featured</a>
</li>
<li>
<a href="#">New Releases</a>
</li>
<li>
<a href="#">Bestsellers</a>
</li>
</ul>
</li>
<li class="sub-dropdown">
<div>
<span>Shoes</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">All Shoes</a>
</li>
<li>
<a href="#">Lifestyle</a>
</li>
<li>
<a href="#">Jordan</a>
</li>
<li>
<a href="#">Running</a>
</li>
<li>
<a href="#">Football</a>
</li>
<li>
<a href="#">Basketball</a>
</li>
</ul>
</li>
<li class="sub-dropdown">
<div>
<span>Clothing</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">All Clothing</a>
</li>
<li>
<a href="#">Tops and T-Shirts</a>
</li>
<li>
<a href="#">Hoodies and Sweatshirts</a>
</li>
<li>
<a href="#">Shorts</a>
</li>
<li>
<a href="#">Tracksuits</a>
</li>
<li>
<a href="#">Trousers and Leggings</a>
</li>
<li>
<a href="#">Jackets</a>
</li>
<li>
<a href="#">Kits and Jerseys</a>
</li>
<li>
<a href="#">Sport Clothing</a>
</li>
</ul>
</li>
<li class="sub-dropdown">
<div>
<span>Kids by age</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">Baby & Toddler(0-3 years)</a>
</li>
<li>
<a href="#">Younger Kids(3-7 years)</a>
</li>
<li>
<a href="#">Older Kids(7-15 years)</a>
</li>
</ul>
</li>
<li class="sub-dropdown">
<div>
<span>Accessories</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">All Accessories</a>
</li>
<li>
<a href="#">Bags and Backpacks</a>
</li>
<li>
<a href="#">Socks</a>
</li>
</ul>
</li>
</ul>
</li>
<!-- Sales section -->
<li class="dropdown">
<div>
<span>Sale</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="menu">
<li>
<a href="#">Sale</a>
</li>
<li class="sub-dropdown">
<div>
<span>Featured</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">Featured</a>
</li>
<li>
<a href="#">Shop All Sale</a>
</li>
<li>
<a href="#">Bestsellers</a>
</li>
</ul>
</li>
<li class="sub-dropdown">
<div>
<span>Sale For Men</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">Shop All Sale Men's</a>
</li>
<li>
<a href="#">Shoes</a>
</li>
<li>
<a href="#">Clothing</a>
</li>
<li>
<a href="#">Accessories</a>
</li>
</ul>
</li>
<li class="sub-dropdown">
<div>
<span>Sale For Women</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">Shop All Sale Women's</a>
</li>
<li>
<a href="#">Shoes</a>
</li>
<li>
<a href="#">Clothing</a>
</li>
<li>
<a href="#">Accessories</a>
</li>
</ul>
</li>
<li class="sub-dropdown">
<div>
<span>Sale For Kids</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">Shop All Sale Kid's</a>
</li>
<li>
<a href="#">Shoes</a>
</li>
<li>
<a href="#">Clothing</a>
</li>
<li>
<a href="#">Accessories</a>
</li>
</ul>
</li>
<li class="sub-dropdown">
<div>
<span>Sale By Sport</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">Sale by Sport's</a>
</li>
<li>
<a href="#">Running</a>
</li>
<li>
<a href="#">Football</a>
</li>
<li>
<a href="#">Basketball</a>
</li>
<li>
<a href="#">Gym and Training</a>
</li>
<li>
<a href="#">Tennis</a>
</li>
<li>
<a href="#">Golf</a>
</li>
<li>
<a href="#">Yoga</a>
</li>
</ul>
</li>
</ul>
</li>
<!-- Collections section -->
<li class="dropdown">
<div>
<span>Collections</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="menu">
<li>
<a href="#">All Collections</a>
</li>
<li class="sub-dropdown">
<div>
<span>Trending</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">All Trending</a>
</li>
<li>
<a href="#">Dunk</a>
</li>
<li>
<a href="# ">Louis Vuitton</a>
</li>
<li>
<a href="#">SuperRep Shoes</a>
</li>
<li>
<a href="#">Women's Air Force I</a>
</li>
<li>
<a href="#">White Air Force I</a>
</li>
<li>
<a href="#">Nike Essentials</a>
</li>
<li>
<a href="#">FlyEase</a>
</li>
</ul>
</li>
<li class="sub-dropdown">
<div>
<span>Lifestyle</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">Lifestyle</a>
</li>
<li>
<a href="#">Air Force I</a>
</li>
<li>
<a href="#">Blazer</a>
</li>
<li>
<a href="#">Air Max</a>
</li>
<li>
<a href="#">Air Max 90</a>
</li>
<li>
<a href="#">Air Max Plus</a>
</li>
<li>
<a href="#">Air Jordan</a>
</li>
</ul>
</li>
<li class="sub-dropdown">
<div>
<span>Running</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">Running</a>
</li>
<li>
<a href="#">React</a>
</li>
<li>
<a href="#">Pegasus</a>
</li>
</ul>
</li>
<li class="sub-dropdown">
<div>
<span>Football</span>
<span class="material-symbols-outlined">
chevron_right
</span>
</div>
<ul class="sub-menu">
<li>
<a href="#">Football</a>
</li>
<li>
<a href="#">Phantom</a>
</li>
<li>
<a href="#">Mercurial</a>
</li>
<li>
<a href="#">National Teams Collections</a>
</li>
<li>
<a href="#">Football Clubs</a>
</li>
<li>
<a href="#">F.C. Barcelona</a>
</li>
<li>
<a href="#">Liverpool F.C.</a>
</li>
<li>
<a href="#">Manchester United</a>
</li>
<li>
<a href="#">Paris Saint-Germain</a>
</li>
<li>
<a href="#">Chelsea</a>
</li>
<li>
<a href="#">Inter Milan</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="buttons">
<button class="btn">Contact</button>
<button class="menu-btn">
<span class="material-symbols-outlined">
menu
</span>
</button>
</div>
</nav>See Also:
WCAG Compliant Responsive Dropdown Navigation – accessible-menu
Responsive Sticky Mega Menu – SnazzyMenu.js
Responsive Multi-level Dropdown Menu With JavaScript And CSS – ozmenu.js
Multi-level Accordion/Dropdown Menu In Vanilla JavaScript – metisMenu
Accessible Dropdown Nav With Vanilla JavaScript – Clicky Menus
Responsive Dropdown/Off-canvas Navigation In Vanilla JavaScript – Menue
Responsive Mega Menu In JavaScript
Sliding Dropdown Menu Inspired By Stripe.com