<!-- Start Navigation Bar -->
<div class="mobile-menu">
<i class="fa fa-bars fa-3x js-menu-icon"></i>
</div>
<nav class="navbar js-navbar">
<ul class="menu">
<li>
<a class="hasDropdown" href="#">Electronics <i class="fa fa-angle-down"></i></a>
<ul class="container">
<div class="container__list">
<div class="container__listItem">
<div>Televisions</div>
</div>
<div class="container__listItem">
<div>Home Entertainment Systems</div>
</div>
<div class="container__listItem">
<div>Headphones</div>
</div>
<div class="container__listItem">
<div>Speakers</div>
</div>
<div class="container__listItem">
<div>MP3, Media Players & Accessories</div>
</div>
<div class="container__listItem">
<div>Audio & Video Accessories</div>
</div>
<div class="container__listItem">
<div>Cameras</div>
</div>
<div class="container__listItem">
<div>DSLR Cameras</div>
</div>
<div class="container__listItem">
<div>Camera Accessories</div>
</div>
<div class="container__listItem">
<div>Musical Instruments & Professional Audio</div>
</div>
<div class="container__listItem">
<div>Gaming Consoles</div>
</div>
<div class="container__listItem">
<div> All Electronics </div>
</div>
<div class="container__listItem">
<div>Air Conditioners</div>
</div>
<div class="container__listItem">
<div>Refrigerators</div>
</div>
<div class="container__listItem">
<div>Washing Machines</div>
</div>
<div class="container__listItem">
<div>Kitchen & Home Appliances</div>
</div>
<div class="container__listItem">
<div>Heating & Cooling Appliances</div>
</div>
<div class="container__listItem">
<div>All Appliances</div>
</div>
</div>
</ul>
</li>
<li>
<a class="hasDropdown" href="#">Appliances <i class="fa fa-angle-down"></i></a>
<ul class="container has-multi">
<div class="container__list container__list-multi">
<div class="container__listItem">
<div>Televisions</div>
</div>
<div class="container__listItem">
<div>Home Entertainment Systems</div>
</div>
<div class="container__listItem">
<div>Headphones</div>
</div>
<div class="container__listItem">
<div>Speakers</div>
</div>
<div class="container__listItem">
<div>MP3, Media Players & Accessories</div>
</div>
<div class="container__listItem">
<div>Audio & Video Accessories</div>
</div>
<div class="container__listItem">
<div>Cameras</div>
</div>
<div class="container__listItem">
<div>DSLR Cameras</div>
</div>
<div class="container__listItem">
<div>Camera Accessories</div>
</div>
<div class="container__listItem">
<div>Musical Instruments & Professional Audio</div>
</div>
<div class="container__listItem">
<div>Gaming Consoles</div>
</div>
<div class="container__listItem">
<div> All Electronics </div>
</div>
<div class="container__listItem">
<div>Air Conditioners</div>
</div>
<div class="container__listItem">
<div>Refrigerators</div>
</div>
<div class="container__listItem">
<div>Washing Machines</div>
</div>
<div class="container__listItem">
<div>Kitchen & Home Appliances</div>
</div>
<div class="container__listItem">
<div>Heating & Cooling Appliances</div>
</div>
<div class="container__listItem">
<div>All Appliances</div>
</div>
</div>
<div class="container__list container__list-multi">
<div class="container__listItem">
<div>Mobiles</div>
</div>
<div class="container__listItem">
<div>Laptops</div>
</div>
<div class="container__listItem">
<div>Mobile Accessories</div>
</div>
<div class="container__listItem">
<div>PC Accessories</div>
</div>
<div class="container__listItem">
<div>Data Storage</div>
</div>
<div class="container__listItem">
<div>PC Components</div>
</div>
<div class="container__listItem">
<div>Speakers</div>
</div>
<div class="container__listItem">
<div>Networking</div>
</div>
<div class="container__listItem">
<div>Printers and Ink</div>
</div>
<div class="container__listItem">
<div>Wearables</div>
</div>
<div class="container__listItem">
<div>Tablets</div>
</div>
<div class="container__listItem">
<div> Desktops </div>
</div>
<div class="container__listItem">
<div>Chromebook</div>
</div>
<div class="container__listItem">
<div>USBs</div>
</div>
<div class="container__listItem">
<div>CAT5 Cables</div>
</div>
<div class="container__listItem">
<div>Water Purifiers</div>
</div>
<div class="container__listItem">
<div>Screenguards</div>
</div>
<div class="container__listItem">
<div>All Appliances</div>
</div>
<div class="container__listItem">
<div>Landline Phones</div>
</div>
<div class="container__listItem">
<div>Chargers</div>
</div>
</div>
<div class="container__list container__list-multi">
<div class="container__listItem">
<div>Selfie Sticks</div>
</div>
<div class="container__listItem">
<div>Pendrives</div>
</div>
<div class="container__listItem">
<div>Keyboards</div>
</div>
<div class="container__listItem">
<div>Mouse</div>
</div>
<div class="container__listItem">
<div>Monitors</div>
</div>
<div class="container__listItem">
<div>Smart Glasses (VR)</div>
</div>
<div class="container__listItem">
<div>iPods and MP3 Players</div>
</div>
<div class="container__listItem">
<div>Mobile Cables</div>
</div>
<div class="container__listItem">
<div>Memory Cards</div>
</div>
<div class="container__listItem">
<div>Power Banks</div>
</div>
<div class="container__listItem">
<div>Home Theatres</div>
</div>
<div class="container__listItem">
<div> Hand Blenders </div>
</div>
<div class="container__listItem">
<div>Air Fryers</div>
</div>
<div class="container__listItem">
<div>Popup Toasters</div>
</div>
<div class="container__listItem">
<div>Coffee Makers</div>
</div>
<div class="container__listItem">
<div>Electric Cooker</div>
</div>
<div class="container__listItem">
<div>Vacuum Cleaners</div>
</div>
<div class="container__listItem">
<div>Fans</div>
</div>
<div class="container__listItem">
<div>Irons</div>
</div>
<div class="container__listItem">
<div>Landline Phones</div>
</div>
</div>
</ul>
</li>
<li>
<a href="#">Kids</a>
</li>
<li>
<a href="#">Men</a>
</li>
<li>
<a href="#">Baby</a>
</li>
<li>
<a href="#">Women</a>
</li>
<li>
<a href="#">Furniture</a>
</li>
<li>
<a href="#">Decors</a>
</li>
</ul>
</nav>
<!-- End Navigation Bar -->* {
box-sizing: border-box;
}
body {
font-family: 'Hind', sans-serif;
background: #edeff0;
}
/* Start Navigation Bar */
.navbar {
max-width: 820px;
margin: 0 auto;
color: #fff;
border-radius: 4px;
background-color: #25283d;
}
.navbar .menu {
position: relative;
display: flex;
}
.navbar .menu li {
display: flex;
transition: background-color .5s ease;
text-align: center;
flex: 1;
}
.navbar .menu a {
position: relative;
display: inline-flex;
padding: 20px;
text-decoration: none;
color: #fff;
flex: 1;
justify-content: center;
}
.navbar .menu a > .fa {
font-weight: bold;
margin-left: 8px;
}
.navbar .menu li:hover {
background-color: #8f3985;
}
.navbar .menu li:hover .container {
display: flex;
}
a.hasDropdown:after {
position: absolute;
z-index: 2;
bottom: -16px;
left: 50%;
width: 0;
height: 0;
transform: translateX(-50%);
border: 8px solid transparent;
border-top-color: #25283d;
}
li:hover a.hasDropdown:after {
content: '';
border-top-color: #8f3985;
}
/* End Navigation Bar */
/* Start Single Section Menu */
.container {
position: absolute;
z-index: 1;
top: 56px;
right: 0;
left: 0;
display: none;
margin-bottom: 30px;
text-align: left;
background-color: #fff;
box-shadow: 0 2px 0 rgba(0, 0, 0, .06);
}
.container__list {
display: flex;
min-width: 0;
padding: 20px;
flex: 1;
flex-wrap: wrap;
}
.container__listItem {
overflow: hidden;
padding: 10px 30px;
white-space: nowrap;
text-overflow: ellipsis;
flex: 0 0 25%;
}
.container__listItem > div {
overflow: hidden;
cursor: pointer;
white-space: nowrap;
text-decoration: underline;
text-overflow: ellipsis;
color: #db6356;
}
/* End Single Section Menu */
/* Start Multiple Section Menu */
.container.has-multi .container__listItem {
flex-basis: 100%;
}
.container.has-multi .container__list {
border-radius: 4px;
flex-basis: 33.333%;
}
.container.has-multi .container__list:not(:last-child) {
margin-right: 20px;
border-right: solid 1px #f3f3f3;
}
/* End Multiple Section Menu */
/* Start Responsive Menu */
.mobile-menu {
display: none;
}
@media only screen and (max-width: 768px) {
.mobile-menu {
display: block;
margin: 20px;
}
.mobile-menu > i {
cursor: pointer;
}
.navbar {
position: absolute;
transition: top .3s ease-in;
top: -100%;
border-radius: 0;
will-change: top;
}
.navbar--is-visible {
top: 88px;
}
.navbar .menu {
flex-direction: column;
}
.navbar .menu li {
position: relative;
flex-direction: column;
transition: initial;
}
.navbar .menu li:hover {
background-color: initial;
}
.navbar .menu li.is-selected {
position: relative;
background-color: #8f3985;
}
.container {
position: static;
display: flex;
overflow: hidden;
max-height: 0;
margin-bottom: 0;
transition: all .3s ease;
}
a.hasDropdown:after {
display: none;
}
.container--is-visible {
max-height: 1000px !important;
}
.container__list .container__listItem:nth-child(n + 11) {
display: none;
}
.container.has-multi .container__list-multi:not(:first-child) {
display: none;
}
.menu .container.has-multi .container__list {
margin-right: 0;
border-right: 0;
}
.navbar .menu li .container__listItem {
flex-basis: 100%;
}
}
/* End Responsive Menu */
$(document).ready(function() {
$(".js-menu-icon").on("click", function() {
$(this).toggleClass("fa-times fa-bars");
$(".menu .container").removeClass("container--is-visible");
$(".menu li").removeClass("is-selected");
$(".js-navbar").toggleClass("navbar--is-visible");
});
$(".menu li").on("click", function(e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass("is-selected");
var $currentContainer = $(this).find(".container");
$currentContainer.toggleClass("container--is-visible");
$(".menu .container")
.not($currentContainer)
.removeClass("container--is-visible");
$(".menu li").not($this).removeClass("is-selected");
});
});
External CSS
This Pen doesn't use any external CSS resources.