Posts

Showing posts from November, 2018

add active menu but not shown in menu

CSS============================= .hs-menu-wrapper ul li.hs-item-has-children.hide-child > .child-trigger { display: none !important; } .hs-menu-wrapper ul li.hs-item-has-children.hide-child > ul { display: none !important; } .hs-menu-wrapper ul li.hs-item-has-children.hide-child > a:after{ display: none !important; } .hide {     display: none !important; } JS============================= $('.hs-menu-wrapper ul li a').each(function(){ $(this).parent().addClass( $(this).text().split(" ").join('-').toLowerCase() ); }); $('.hs-menu-wrapper ul li.hs-item-has-children').each(function(){ var childLength = $(this).children('ul').children('li').length; var childHideLength = $(this).children('ul').children('li.hide').length; if( childLength == childHideLength ){ $(this).addClass('hide-child'); } });

mobile trigger effect

Image
/*============= JS ==============*/ $('.custom-menu-primary .hs-menu-wrapper').before('<div class="mobile-trigger"><span></span><span></span><span></span><span></span><span></span><span></span></div>'); /*============= CSS ==============*/ .mobile-trigger {     display: inline-block !important;     cursor: pointer;     position: absolute;     left: 15px;     top: 22px;     z-index: 9999999;     width: 34px;     -webkit-transform: rotate(0deg);     -moz-transform: rotate(0deg);     -o-transform: rotate(0deg);     transform: rotate(0deg);     -webkit-transition: .5s ease-in-out;     -moz-transition: .5s ease-in-out;     -o-transition: .5s ease-in-out;     transition: .5s ease-in-out;     height: 24px;   }   .mobile-trigger span {     display: block;     position: absolute;     height: 2px;     width: 50%;     background: #fff;     opacity: 1;  

SlideToggle Effect In Menu

Image
SlideToggle Effect In Menu ====== CSS ====== @media (min-width:768px){ .custom-menu-primary .hs-menu-wrapper > ul > li ul {    visibility:visible !important;    opacity:1 !important;    max-height:0;    overflow:hidden;    transition:all 0.5s ease !important;  } } ====== JS ======= $('.custom-menu-primary .hs-menu-wrapper > ul > li ul').each(function(){    $(this).wrapInner('<div class="inner_part"></div>');  });  $('.custom-menu-primary .hs-menu-wrapper > ul li').hover(function(){    var eachHeight = $(this).children('ul').children('.inner_part').outerHeight();    $(this).children('ul').css('max-height', eachHeight );  },function(){    $(this).children('ul').css('max-height', '0px' );  });  $('.custom-menu-primary .hs-menu-wrapper > ul > li ul').hover(function(){    $(this).css('overflow', 'visible' );  },function(){    $(this).css(&#