Author: | syahrizaldev |
---|---|
Views Total: | 12,446 views |
Official Page: | Go to website |
Last Update: | November 3, 2021 |
License: | MIT |
Preview:

Description:
A modern, responsive mega menu template for online stores. Written in Pure JavaScript and CSS/CSS3.
When the screen size is smaller than 992px, the mega menu will be collapsed into a multi-level sidebar menu, which is togglable with a hamburger button:
How to use it:
1. The main HTML structure for the responsive mega menu.
<header class="header"> <div class="container"> <div class="wrapper"> <div class="header-item-left"> <h1><a href="#" class="brand">Logo</a></h1> </div> <div class="header-item-center"> <div class="overlay"></div> <nav class="menu"> <div class="menu-mobile-header"> <button type="button" class="menu-mobile-arrow"><i class="ion ion-ios-arrow-back"></i></button> <div class="menu-mobile-title"></div> <button type="button" class="menu-mobile-close"><i class="ion ion-ios-close"></i></button> </div> <ul class="menu-section"> <li><a href="#">Home</a></li> <li class="menu-item-has-children"> <a href="#">What's New <i class="ion ion-ios-arrow-down"></i></a> <div class="menu-subs menu-mega menu-column-4"> <div class="list-item text-center"> <a href="#"> <img src="./asset/image-1.jpg" class="responsive" alt="New Product"> <h4 class="title">Product 1</h4> </a> </div> <div class="list-item text-center"> <a href="#"> <img src="./asset/image-2.jpg" class="responsive" alt="New Product"> <h4 class="title">Product 2</h4> </a> </div> <div class="list-item text-center"> <a href="#"> <img src="./asset/image-3.jpg" class="responsive" alt="New Product"> <h4 class="title">Product 3</h4> </a> </div> <div class="list-item text-center"> <a href="#"> <img src="./asset/image-4.jpg" class="responsive" alt="New Product"> <h4 class="title">Product 4</h4> </a> </div> </div> </li> <li class="menu-item-has-children"> <a href="#">Category <i class="ion ion-ios-arrow-down"></i></a> <div class="menu-subs menu-mega menu-column-4"> <div class="list-item"> <h4 class="title">Men's Fashion</h4> <ul> <li><a href="#">Product List</a></li> <li><a href="#">Product List</a></li> <li><a href="#">Product List</a></li> <li><a href="#">Product List</a></li> </ul> <h4 class="title">Kid's Fashion</h4> <ul> <li><a href="#">Product List</a></li> <li><a href="#">Product List</a></li> <li><a href="#">Product List</a></li> <li><a href="#">Product List</a></li> </ul> </div> <div class="list-item"> <h4 class="title">Women's Fashion</h4> <ul> <li><a href="#">Product List</a></li> <li><a href="#">Product List</a></li> <li><a href="#">Product List</a></li> <li><a href="#">Product List</a></li> </ul> <h4 class="title">Health & Beauty</h4> <ul> <li><a href="#">Product List</a></li> <li><a href="#">Product List</a></li> <li><a href="#">Product List</a></li> <li><a href="#">Product List</a></li> </ul> </div> <div class="list-item"> <h4 class="title">Home & Lifestyle</h4> <ul> <li><a href="#">Product List</a></li> <li><a href="#">Product List</a></li> <li><a href="#">Product List</a></li> <li><a href="#">Product List</a></li> <li><a href="#">Product List</a></li> <li><a href="#">Product List</a></li> <li><a href="#">Product List</a></li> <li><a href="#">Product List</a></li> <li><a href="#">Product List</a></li> </ul> </div> <div class="list-item"> <img src="./asset/image-5.jpg" class="responsive" alt="Shop Product"> </div> </div> </li> <li class="menu-item-has-children"> <a href="#">Articles <i class="ion ion-ios-arrow-down"></i></a> <div class="menu-subs menu-column-1"> <ul> <li><a href="#">Article One</a></li> <li><a href="#">Article Two</a></li> <li><a href="#">Article Three</a></li> <li><a href="#">Article Four</a></li> </ul> </div> </li> <li class="menu-item-has-children"> <a href="#">Accounts <i class="ion ion-ios-arrow-down"></i></a> <div class="menu-subs menu-column-1"> <ul> <li><a href="#">Login and Register</a></li> <li><a href="#">Help and Question</a></li> <li><a href="#">Privacy and Policy</a></> <li><a href="#">Term of Cookies</a></> </ul> </div> </li> <li><a href="#">Contact</a></li> </ul> </nav> </div> <div class="header-item-right"> <a href="#" class="menu-icon"><i class="ion ion-md-search"></i></a> <a href="#" class="menu-icon"><i class="ion ion-md-heart"></i></a> <a href="#" class="menu-icon"><i class="ion ion-md-cart"></i></a> <button type="button" class="menu-mobile-trigger"> <span></span> <span></span> <span></span> <span></span> </button> </div> </div> </div> </header>
2. Load the style.css
in the document.
<link rel="stylesheet" type="text/css" href="./css/style.min.css">
3. The main JavaScript to enable the responsive mega menu.
const menu = document.querySelector('.menu'); const menuSection = menu.querySelector('.menu-section'); const menuArrow = menu.querySelector('.menu-mobile-arrow'); const menuClosed = menu.querySelector('.menu-mobile-close'); const menuTrigger = document.querySelector('.menu-mobile-trigger'); const menuOverlay = document.querySelector('.overlay'); let subMenu; menuSection.addEventListener('click', (e) => { if (!menu.classList.contains('active')) { return; } if (e.target.closest('.menu-item-has-children')) { const hasChildren = e.target.closest('.menu-item-has-children'); showSubMenu(hasChildren); } }); menuArrow.addEventListener('click', () => { hideSubMenu(); }); menuTrigger.addEventListener('click', () => { toggleMenu(); }); menuClosed.addEventListener('click', () => { toggleMenu(); }); menuOverlay.addEventListener('click', () => { toggleMenu(); }); function toggleMenu() { menu.classList.toggle('active'); menuOverlay.classList.toggle('active'); } function showSubMenu(hasChildren) { subMenu = hasChildren.querySelector('.menu-subs'); subMenu.classList.add('active'); subMenu.style.animation = 'slideLeft 0.5s ease forwards'; const menuTitle = hasChildren.querySelector('i').parentNode.childNodes[0].textContent; menu.querySelector('.menu-mobile-title').innerHTML = menuTitle; menu.querySelector('.menu-mobile-header').classList.add('active'); } function hideSubMenu() { subMenu.style.animation = 'slideRight 0.5s ease forwards'; setTimeout(() => { subMenu.classList.remove('active'); }, 300); menu.querySelector('.menu-mobile-title').innerHTML = ''; menu.querySelector('.menu-mobile-header').classList.remove('active'); } window.onresize = function () { if (this.innerWidth > 991) { if (menu.classList.contains('active')) { toggleMenu(); } } };
Changelog:
11/03/2021
- Update
how have non sticky menu
Can I use this for commercial use? I have created a template for selling on themeforest.net . Can I use this menu into my template for selling?