"Navbar + expandable search + Menu + effect + dropdown + search + ravi"
Bootstrap 3.3.0 Snippet by ravi7284007

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <nav class="navbar new_nav"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#0" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Apparels <i class="fa fa-angle-down" aria-hidden="true"></i></a> <ul class="dropdown-menu"> <li><a href="#">Collar Tshirts <li><a href="#">Round Neck Tshirts</a> </li> <li><a href="#">V Neck Tshirts</a> </li> <li><a href="#">Sweatshirts</a> </li> <li><a href="#">Hoodies</a> </li> <li><a href="#">Jackets</a> </li> <li><a href="#">Caps</a> </li> </ul> </li> <li class="dropdown"> <a href="#0" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Bags <i class="fa fa-angle-down" aria-hidden="true"></i></a> <ul class="dropdown-menu"> <li><a href="#">Laptop Backpacks</a> </li> <li><a href="#">Ladies Bags</a> </li> <li><a href="#">Drawstring Bags</a> </li> <li><a href="#">Convertible Backpacks</a> </li> <li><a href="#">Travel Bags</a> </li> <li><a href="#">Strolley Bag</a> </li> <li><a href="#">Jute Bags</a> </li> </ul> </li> <li class="dropdown"> <a href="#0" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Drinkware <i class="fa fa-angle-down" aria-hidden="true"></i></a> <ul class="dropdown-menu"> <li><a href="#">Mugs</a> </li> <li><a href="#">Flasks</a> </li> <li><a href="#">Sippers</a> </li> <li><a href="#">Gym Shakers</a> </li> </ul> </li> <li class="dropdown"> <a href="#0" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Work <i class="fa fa-angle-down" aria-hidden="true"></i></a> <ul class="dropdown-menu"> <li><a href="#">Pen</a> </li> <li><a href="#">Folder</a> </li> <li><a href="#">Cardholder</a> </li> <li><a href="#">Coasters</a> </li> <li><a href="#">Photoframes</a> </li> <li><a href="#">Table Tops</a> </li> <li><a href="#">Sets</a> </li> <li><a href="#">Pen Drives</a> </li> </ul> </li> <li class="dropdown"> <a href="#0" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Gadgets <i class="fa fa-angle-down" aria-hidden="true"></i></a> <ul class="dropdown-menu"> <li><a href="#">Bluetooth Speakers</a> </li> <li><a href="#">Powerbanks</a> </li> <li><a href="#">Headphones</a> </li> </ul> </li> <li class="dropdown"> <a href="#0" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Promotional Giveaways <i class="fa fa-angle-down" aria-hidden="true"></i></a> <ul class="dropdown-menu"> <li><a href="#">Silicon Wristband</a> </li> <li><a href="#">Badges</a> </li> <li><a href="#">Silicon Mobile Holder</a> </li> <li><a href="#">Fridge Magnet <li><a href="#">Keychain</a> </li> <li><a href="#">Foldable Umbrella</a> </li> <li><a href="#">Golf Umbrella</a> </li> <li><a href="#">Mouse Pad</a> </li> </ul> </li> <li class="dropdown"> <a href="#0" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Promotional Giveaways <i class="fa fa-angle-down" aria-hidden="true"></i></a> <ul class="dropdown-menu"> <li><a href="#">Leather Accessories</a> </li> <li><a href="#">Ladies Wallets</a> </li> <li><a href="#">Gents wallets</a> </li> <li><a href="#">Leatherite Folders</a> </li> <li><a href="#">Travel wallets</a> </li> </ul> </li> </ul> <form class="navbar-form" role="search"> <div class="input-group"> <input type="text" class="form-control pull-right" style="width: 300px; margin-right: 35px, border: 1px solid black; background-color: #e5e5e5;" placeholder="Search"> <span class="input-group-btn"> <button type="reset" class="btn btn-default"> <span class="fa fa-remove"> <span class="sr-only">Close</span> </span> </button> <button type="submit" class="btn btn-default"> <span class="fa fa-search"> <span class="sr-only">Search</span> </span> </button> </span> </div> </form> </div> <!--/.nav-collapse --> </div> <!--/.container-fluid --> </nav>
body{ height:1000vh; background:url(https://picsum.photos/2000/3000/?random);} .open > .dropdown-menu { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity:1; } .dropdown-menu { opacity:.3; -webkit-transform-origin: top; transform-origin: top; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform: scale(1, 0); transition: all 0.3s linear; -webkit-transition: all 0.3s linear; } .navbar{ min-height:auto} nav.navbar.new_nav a { padding: 10px 18px; color: #222; } nav.navbar.new_nav { background: #f9f9f9; position: sticky; top: 0; z-index: 999999;box-shadow: 0 0 2px #ccc; } /*new search*/ .navbar-collapse { position: relative; padding-top: 30px !important; max-height: 270px; } .navbar-collapse form[role="search"] { position: absolute; top: 0px; right: 0px; width: 100%; padding: 0px; margin: 0px; z-index: 0;text-align: right; } .navbar-collapse form[role="search"] button, .navbar-collapse form[role="search"] input { padding: 8px 12px; border-radius: 0px; border-width: 0px; color: rgb(119, 119, 119); background-color: rgb(248, 248, 248); border-color: rgb(231, 231, 231); box-shadow: none; outline: none; } .navbar-collapse form[role="search"] input { padding: 16px 12px; font-size: 14pt; font-style: italic; color: rgb(160, 160, 160); box-shadow: none; } .navbar-collapse form[role="search"] button[type="reset"] { display: none; } @media (min-width: 768px) { .navbar-collapse { padding-top: 0px !important; padding-right: 38px !important; } .navbar-collapse form[role="search"] { width: 38px; } .navbar-collapse form[role="search"] button, .navbar-collapse form[role="search"] input { padding: 12px 12px; } .navbar-collapse form[role="search"] input { padding: 25px 12px; font-size: 16px; opacity: 0; display: none; } .navbar-collapse form[role="search"].active { width: 100%; } .navbar-collapse form[role="search"].active button, .navbar-collapse form[role="search"].active input { display: table-cell; opacity: 1; } .navbar-collapse form[role="search"].active input { width: 100%; } }
$(document).ready(function() { $(".dropdown").hover( function() { $('.dropdown-menu', this).stop( true, true ).fadeIn("fast"); $(this).toggleClass('open'); $('b', this).toggleClass("caret caret-up"); }, function() { $('.dropdown-menu', this).stop( true, true ).fadeOut("fast"); $(this).toggleClass('open'); $('b', this).toggleClass("caret caret-up"); }); }); $(function () { // Remove Search if user Resets Form or hits Escape! $('body, .navbar-collapse form[role="search"] button[type="reset"]').on('click keyup', function(event) { console.log(event.currentTarget); if (event.which == 27 && $('.navbar-collapse form[role="search"]').hasClass('active') || $(event.currentTarget).attr('type') == 'reset') { closeSearch(); } }); function closeSearch() { var $form = $('.navbar-collapse form[role="search"].active') $form.find('input').val(''); $form.removeClass('active'); } // Show Search if form is not active // event.preventDefault() is important, this prevents the form from submitting $(document).on('click', '.navbar-collapse form[role="search"]:not(.active) button[type="submit"]', function(event) { event.preventDefault(); var $form = $(this).closest('form'), $input = $form.find('input'); $form.addClass('active'); $input.focus(); }); // ONLY FOR DEMO // Please use $('form').submit(function(event)) to track from submission // if your form is ajax remember to call `closeSearch()` to close the search container $(document).on('click', '.navbar-collapse form[role="search"].active button[type="submit"]', function(event) { event.preventDefault(); var $form = $(this).closest('form'), $input = $form.find('input'); $('#showSearchTerm').text($input.val()); closeSearch() }); });

Related: See More


Questions / Comments: