$(document).ready(function() { "use strict"; var menuActive = false; var header = $('.header'); setHeader(); initCustomDropdown(); initPageMenu(); function setHeader() { if(window.innerWidth > 991 && menuActive) { closeMenu(); } } function initCustomDropdown() { if($('.custom_dropdown_placeholder').length && $('.custom_list').length) { var placeholder = $('.custom_dropdown_placeholder'); var list = $('.custom_list'); } placeholder.on('click', function (ev) { if(list.hasClass('active')) { list.removeClass('active'); } else { list.addClass('active'); } $(document).one('click', function closeForm(e) { if($(e.target).hasClass('clc')) { $(document).one('click', closeForm); } else { list.removeClass('active'); } }); }); $('.custom_list a').on('click', function (ev) { ev.preventDefault(); var index = $(this).parent().index(); placeholder.text( $(this).text() ).css('opacity', '1'); if(list.hasClass('active')) { list.removeClass('active'); } else { list.addClass('active'); } }); $('select').on('change', function (e) { placeholder.text(this.value); $(this).animate({width: placeholder.width() + 'px' }); }); } /* 4. Init Page Menu */ function initPageMenu() { if($('.page_menu').length && $('.page_menu_content').length) { var menu = $('.page_menu'); var menuContent = $('.page_menu_content'); var menuTrigger = $('.menu_trigger'); //Open / close page menu menuTrigger.on('click', function() { if(!menuActive) { openMenu(); } else { closeMenu(); } }); //Handle page menu if($('.page_menu_item').length) { var items = $('.page_menu_item'); items.each(function() { var item = $(this); if(item.hasClass("has-children")) { item.on('click', function(evt) { evt.preventDefault(); evt.stopPropagation(); var subItem = item.find('> ul'); if(subItem.hasClass('active')) { subItem.toggleClass('active'); TweenMax.to(subItem, 0.3, {height:0}); } else { subItem.toggleClass('active'); TweenMax.set(subItem, {height:"auto"}); TweenMax.from(subItem, 0.3, {height:0}); } }); } }); } } } function openMenu() { var menu = $('.page_menu'); var menuContent = $('.page_menu_content'); TweenMax.set(menuContent, {height:"auto"}); TweenMax.from(menuContent, 0.3, {height:0}); menuActive = true; } function closeMenu() { var menu = $('.page_menu'); var menuContent = $('.page_menu_content'); TweenMax.to(menuContent, 0.3, {height:0}); menuActive = false; } });
Script Copy url Copy url with Tag
Bootstrap CSS https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css copy copy script
Bootstrap JS https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js copy copy script
Icons https://use.fontawesome.com/releases/v5.8.1/css/all.css copy copy script
Jquery https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js copy copy script

Related Snippets

view all snippets
Latest snippets
About this snippet

Bootstrap 4 E-Commerce menu header using HTML CSS snippet is created by BBBootstrap Team using Bootstrap 4.1.1, Javascript 3.2.1. This snippet is free and open source hence you can use it in your project.Bootstrap 4 E-Commerce menu header using HTML CSS snippet example is best for Bootstrap ecommerce, Bootstrap header, Bootstrap menu, responsive.A great starter for your new awesome project with 1000+ Font Awesome Icons, 4000+ Material Design Icons and Material Design Colors at BBBootstrap.com.

Join BBBootstrap community

Contribute an awesome snippet to help other developer and designers