<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <div class="row"> <div class="categories col-lg-auto col-12 bg-dark p-0"> <h2>CATEGORIES</h2> <nav class="navbar navbar-expand-lg navbar-dark p-0"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link" href="#">Clothing</a></li> <li class="nav-item"><a class="nav-link" href="#">Electronics</a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Shoes</a> <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <li><a class="dropdown-item" href="#">Reebok</a></li> <li><a class="dropdown-item" href="#">Puma</a></li> <li><a class="dropdown-item" href="#">NIke</a></li> </ul> </li> <li class="nav-item"><a class="nav-link" href="#">Watches</a></li> <li class="nav-item"><a class="nav-link" href="#">Jewellery</a></li> <li class="nav-item"><a class="nav-link" href="#">Health and Beauty</a></li> <li class="nav-item"><a class="nav-link" href="#">Kids and Babies</a></li> <li class="nav-item"><a class="nav-link" href="#">Sports</a></li> <li class="nav-item"><a class="nav-link" href="#">Home and Garden</a></li> <li class="nav-item"><a class="nav-link" href="products.html">+View More</a></li> </ul> </div> </nav> <!--navbar end--> </div> <!--categories end--> </div> </div>

.categories {min-width:370px; max-width:370px; height:100vh; } .categories h2{font-size:18px; color:#FFFFFF; font-weight:700; letter-spacing:0.3px; margin:0; padding:34px 15px 24px 30px; border-bottom:solid 1px #999999; } .navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-nav .dropdown-item{ border-bottom:solid 1px rgba(191, 189, 189, 0.25); color: rgba(255, 255, 255, 0.76); padding:12px 30px; position:relative; font-size: 15px; font-weight: 500; } .navbar-dark .navbar-nav .nav-link:before{ content: "\f105"; font-family: 'FontAwesome'; position:absolute; color:#707070; font-size:16px; right:15px; } .navbar-dark .navbar-nav .nav-item:hover .nav-link:before{color:#FFF;} .navbar-dark .navbar-nav .nav-item:hover .nav-link{background:#0c95e5; color:#FFF;} .navbar-dark .navbar-nav .nav-link:after, .navbar-dark .navbar-nav .nav-item:last-child .nav-link:before{display:none;} .navbar-dark .navbar-nav .nav-item:last-child .nav-link, .navbar-dark .navbar-nav li:last-child .dropdown-item{border-bottom:none;} .navbar-dark .navbar-toggler{position:absolute; right:30px; top:-60px; } .navbar-dark .navbar-nav .dropdown {position: relative;} .navbar-dark .navbar-nav .dropdown-menu a::after { transform: rotate(-90deg); position: absolute; right: 6px; top: .8em; } .navbar-dark .navbar-nav .dropdown-menu { top: -1px; left: 100%; margin:0; padding:0; background:#0c95e5; border-radius:0; } .navbar-dark .navbar-nav .dropdown-item:focus, .navbar-dark .navbar-nav .dropdown-item:hover{background-color:transparent; color: #fff; } @media only screen and (min-width:992px) { .categories .dropdown .dropdown-menu { -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); -ms-transform-origin: 0 0 0; -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0; -webkit-transition: all 0.25s ease 0s; -moz-transition: all 0.25s ease 0s; -o-transition: all 0.25s ease 0s; transition: all 0.25s ease 0s; display: block; } .categories .dropdown:hover .dropdown-menu { margin-top: 0; -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } .categories .navbar-expand-lg .navbar-nav{ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; } } @media only screen and (max-width:991px) { .categories{min-width: 100%; max-width: 100%; } }

//Categories menu $('.dropdown-menu a.dropdown-toggle').on('click', function(e) { if (!$(this).next().hasClass('show')) { $(this).parents('.dropdown-menu').first().find('.show').removeClass("show"); } var $subMenu = $(this).next(".dropdown-menu"); $subMenu.toggleClass('show'); $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) { $('.dropdown-submenu .show').removeClass("show"); }); return false; });