megamenu js - bp
unknown
javascript
2 years ago
2.1 kB
5
Indexable
// mega menu js var menuElement = "#my-mega-menu .menu-item"; var mobileToggle = '.fl-menu-mobile-toggle'; jQuery(document).ready(function() { // exit if bb is running if (jQuery('body').hasClass('fl-builder-edit')) return true; // add the helper parent class to the mega menu for mobile jQuery('[id^="mega-"]').first().parent().addClass('mega-mobile-container'); // set top location of jQuery(window).on('resize', function() { if (isMobile()) // set init value { // set top value of container topValue = jQuery(mobileToggle).offset().top + jQuery(mobileToggle).outerHeight(); jQuery('.mega-mobile-container').css('top', topValue + 'px'); } else { jQuery('.mega-mobile-container').css('top', ''); jQuery('.show-mega-mobile').removeClass('show-mega-mobile'); topValue = 0; } jQuery(menuElement).each(function() { var menuItem = jQuery(this); var megaItem = jQuery("#" + "mega-" + menuItem.text().replace(/\s/g, "-").toLowerCase()); if (megaItem.length) // if it's mega anything { // set up hover listeners for menu items menuItem.hover(function() { if (!isMobile()) { jQuery("#" + "mega-" + jQuery(this).text().replace(/\s/g, "-").toLowerCase()).addClass('show-mega'); } }, function() { if (!isMobile()) { jQuery("#" + "mega-" + jQuery(this).text().replace(/\s/g, "-").toLowerCase()).removeClass('show-mega'); } }); // the rest should be handled with CSS if (isMobile()) { megaItem.css('top', topValue + 'px'); topValue += megaItem.height(); } else { jQuery('body').removeClass('show-mega-mobile'); topValue = menuItem.offset().top + menuItem.outerHeight(); megaItem.css('top', topValue + 'px'); } } }); }).resize(); jQuery(mobileToggle).click(function(event) { event.preventDefault(); event.stopPropagation(); jQuery('body').toggleClass('show-mega-mobile'); }); }); function isMobile() { return jQuery(mobileToggle).is(':visible'); }
Editor is loading...