megamenu js - bp
unknown
javascript
3 years ago
2.1 kB
8
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...