"Bootstrap Dropdown Menu with mobile animation"
Bootstrap 3.0.0 Snippet by mani88100ni

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu"> <i class="fa fa-bars"></i> </button> </div> <div class="collapse navbar-collapse" id="navbar-menu"> <ul class="nav navbar-nav mobile-menu"> <li> <a href="#!">Home</a> <span class="has-dropdown"></span> <ul class="dropdown-menu"> <li> <a href="#">Home Page 1</a> </li> <li> <a href="#">Home Page 2</a> </li> <li> <a href="#">Home Page 3</a> </li> <li> <a href="#">Home Page 4</a> </li> <li> <a href="#">Home Page 5</a> </li> </ul> </li> <li> <a href="#!">About us</a> <span class="has-dropdown"></span> <ul class="dropdown-menu"> <li> <a href="#">About</a> </li> <li> <a href="#">About 2</a> </li> <li> <a href="#">About 3</a> </li> <li> <a href="#">history</a> </li> <li> <a href="#">career</a> </li> <li> <a href="#">partnerships</a> </li> <li> <a href="#">leadership</a> </li> </ul> </li> <li> <a href="javascript:avoid(0);">services</a> <span class="has-dropdown"></span> <ul class="dropdown-menu"> <li> <a href="#">Services</a> </li> <li> <a href="#">Business Loan</a> </li> <li> <a href="#">Financial Planing</a> </li> <li> <a href="#">Insurance Consulting</a> </li> <li> <a href="#">Investments Managment</a> </li> <li> <a href="#">Saving Investing</a> </li> <li> <a href="#">Taxes Planing</a> </li> </ul> </li> <li> <a href="javascript:avoid(0);">Project</a> <span class="has-dropdown"></span> <ul class="dropdown-menu"> <li> <a href="#">project</a> </li> <li> <a href="#">Projec Details</a> </li> </ul> </li> <li> <a href="javascript:avoid(0);">blog</a> <span class="has-dropdown"></span> <ul class="dropdown-menu"> <li> <a href="#">Blog</a> </li> <li> <a href="#">Blog Details</a> </li> </ul> </li> <li> <a href="javascript:avoid(0);">pages</a> <span class="has-dropdown"></span> <ul class="dropdown-menu"> <li> <a href="#">Gallery Grid</a> </li> <li> <a href="#">Gallery Masonry</a> </li> <li> <a href="#">Team</a> </li> <li> <a href="#">pricing</a> </li> <li> <a href="#">Faq</a> </li> <li> <a href="#">Register</a> </li> <li> <a href="#">login</a> </li> <li> <a href="#">Testimonials</a> </li> <li> <a href="#">404 Error</a> </li> <li> <a href="#">blank</a> </li> </ul> </li> <li> <a href="#!">Shop</a> <span class="has-dropdown"></span> <ul class="dropdown-menu"> <li> <a href="#">Shop</a> </li> <li> <a href="#">shop sidebar</a> </li> <li> <a href="#">shop details</a> </li> <li> <a href="#">cart</a> </li> <li> <a href="#">Checkout</a> </li> </ul> </li> <li> <a href="#!">Contact us</a> <span class="has-dropdown"></span> <ul class="dropdown-menu"> <li> <a href="#">contact</a> </li> <li> <a href="#">contact 2</a> </li> </ul> </li> <li><a href="#">Find Advisor</a></li> </ul> </div> </nav>
@media (min-width: 1024px) { .navbar-default ul.nav > li > a:hover, .navbar-default ul.nav > li > a:focus{ color: #fd9b28; } .navbar-default ul.nav > li.dropdown > a:after { font-family: 'FontAwesome'; content: "\f0d7"; margin-left: 5px; margin-top: 2px; } .navbar-default li.dropdown ul.dropdown-menu { -moz-box-shadow: 0px 0px 0px; -webkit-box-shadow: 0px 0px 0px; -o-box-shadow: 0px 0px 0px; box-shadow: 0px 0px 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; padding: 0; width: 200px; background: #fff; border: solid 1px #e0e0e0; border-top: solid 5px; } .navbar-default li.dropdown ul.dropdown-menu > li a:hover, .navbar-default li.dropdown ul.dropdown-menu > li a:hover { background-color: transparent; } .navbar-default li.dropdown ul.dropdown-menu > li > a { padding: 10px 15px; border-bottom: solid 1px #eee; color: #6f6f6f; } .navbar-default li.dropdown ul.dropdown-menu > li:last-child > a { border-bottom: none; } .navbar-default ul.navbar-right li.dropdown ul.dropdown-menu li a { text-align: right; } } @media (max-width: 992px) { .navbar-default .navbar-brand { display: inline-block; float: none !important; margin: 0 !important; } .navbar-default .navbar-header { float: none; display: block; text-align: center; padding-left: 30px; padding-right: 30px; } .navbar-default .navbar-toggle { display: inline-block; float: left; margin-right: -200px; margin-top: 10px; } .navbar-default .navbar-collapse { border: none; margin-bottom: 0; } .navbar-default .navbar-collapse.collapse { display: none !important; } .navbar-default .navbar-collapse.collapse.in { display: block !important; } .navbar-default .navbar-nav { float: none !important; padding-left: 30px; padding-right: 30px; margin: 0px -15px; } .navbar-default .navbar-nav > li { float: none; } .navbar-default li.dropdown a:before { font-family: 'FontAwesome'; content: "\f105"; float: right; font-size: 16px; margin-left: 10px; } .navbar-default li.dropdown.on > a:before { content: "\f107"; } .navbar-default .navbar-nav > li > a { display: block; width: 100%; border-bottom: solid 1px #e0e0e0; padding: 10px 0; border-top: solid 1px #e0e0e0; margin-bottom: -1px; } .navbar-default .navbar-nav > li:first-child > a { border-top: none; } .navbar-default ul.navbar-nav.navbar-left > li:last-child > ul.dropdown-menu { border-bottom: solid 1px #e0e0e0; } .navbar-default ul.nav li.dropdown li a { float: none !important; position: relative; display: block; width: 100%; } .navbar-default ul.nav li.dropdown ul.dropdown-menu { width: 100%; position: relative !important; background-color: transparent; float: none; border: none; padding: 0 0 0 15px !important; margin: 0 0 -1px 0 !important; -moz-box-shadow: 0px 0px 0px; -webkit-box-shadow: 0px 0px 0px; -o-box-shadow: 0px 0px 0px; box-shadow: 0px 0px 0px; -moz-border-radius: 0px 0px 0px; -webkit-border-radius: 0px 0px 0px; -o-border-radius: 0px 0px 0px; border-radius: 0px 0px 0px; } .navbar-default ul.nav li.dropdown ul.dropdown-menu > li > a { display: block; width: 100%; border-bottom: solid 1px #e0e0e0; padding: 10px 0; color: #6f6f6f; } .navbar-default ul.nav ul.dropdown-menu li a:hover, .navbar-default ul.nav ul.dropdown-menu li a:focus { background-color: transparent; color: #fd9b28; } .navbar-default ul.nav ul.dropdown-menu ul.dropdown-menu { float: none !important; left: 0; padding: 0 0 0 15px; position: relative; background: transparent; width: 100%; } .navbar-default ul.nav ul.dropdown-menu li.on > ul.dropdown-menu { display: inline-block; margin-top: -10px; } .navbar-default li ul.dropdown-menu li > a:after { display: none; } } @media (max-width: 767px) { .navbar-default .navbar-header { padding-left: 15px; padding-right: 15px; } .navbar-default .navbar-nav { padding-left: 15px; padding-right: 15px; } .navbar-default .navbar-collapse { margin-left: 0; } .navbar-default ul.nav { margin-left: -15px; } .navbar-default ul.nav { border-top: solid 1px #fff; } } @media (max-width: 991px) { .navbar-default{ background: #f3f3f3; } .navbar-default .navbar-toggle { float: right; margin-right: 0; background: #131d33; border-radius: 0px; color: #fff; width: 40px; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background: #131d33; border-radius: 0px; color: #fff; } } .navbar-default ul li > ul { border: none; background: none; border-bottom: 2px solid #0c1f38; border-radius: 0; position: absolute; padding: 6px 0 0; top: 44px; width: 230px; } .navbar-nav li a { text-transform: capitalize; } .navbar-default ul ul li { border-bottom: 1px solid #223359; display: block; background: #ffffff; } .navbar-default ul ul li a { display: block; margin: 0; color: #fff; background-color: #131d33; padding: 13px 6px 13px 30px; position: relative; transition: .4s; border: none; } .nav > li > a:focus, .nav > li > a:hover { background-color: rgba(0, 0, 0, 0); text-decoration: none; } .nav.navbar-nav { float: none; } .has-dropdown { position: absolute; z-index: 10; right: 0; top: 0; display: block; border-left: 1px solid #e0e0e0; height: 50px; width: 50px; cursor: pointer; pointer-events: none; display: none; } .has-dropdown::before { content: "\f107"; font-family: 'FontAwesome'; color: #131d33; position: absolute; left: 19px; top: 10px; display: block; font-size: 20px; z-index: 99; } @media (max-width: 1199px) { .navbar-default ul.nav > li > a { padding: 15px 22px; } } /*@media (max-width: 991px) { .has-dropdown { display: block; } }*/ @media (max-width: 991px) { .has-dropdown { display: block; } .navbar-default ul li > ul { position: static; width: 100%; border: none; box-shadow: none; float: none; margin: 0; padding: 0 } .navbar-default ul ul li { background: #131d33; border-bottom: 1px solid #223359; } .navbar-default ul ul li a { color: #cac6c6; } .navbar-default ul.nav > li > a { margin-bottom: 0; border-top: none; } } @media (min-width: 992px) { .navbar-default{ background: #131d33 } .navbar-default ul.nav > li > a { padding: 15px 22px; color: #fff; font-size: 14px; } .navbar-nav > li:hover .dropdown-menu { display: block; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: #fd9b28; text-decoration: none; background-color: #131d33; } .navbar-default ul li > ul { border: none; background: none; border-bottom: 2px solid #0c1f38; border-radius: 0; position: absolute; padding: 6px 0 0; top: 60px; width: 230px; display: block; visibility: hidden; opacity: 0; } .navbar-default ul li:hover .dropdown-menu{ transition: all 0.5s ease-in-out; opacity: 1; visibility: visible; top: 44px; } }
$(".mobile-menu> li >a").click(function(){ if ($(window).width() <= 991) { $('.mobile-menu> li').removeClass('on'); $('.mobile-menu> li> ul').slideUp('normal'); if ($(this).next().next('ul').is(':hidden') === true) { $(this).parent('li').addClass('on'); $(this).next().next('ul').slideDown('normal'); } } });

Questions / Comments: