megamenu js - bp

 avatar
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...