IDEAS

Simple Mega Menus with Beaver Builder and Beaver Themer

June 1, 2021

Heads Up!

We turned the below code into another awesome tool and chucked it into Beaver Team Pro. Plus we added keyboard navigation for accessibility and an even simpler configuration! Check out the Video on the Mega menu update.

Dont worry, the code below still works great.

I played with a million mega menu plugins over the years and they were all to complex or too simple to make it look good. So I ended up building my own.

These snippets of CSS/JS are all you need to add to your BB/Themer website to create awesome Mega Menus

Watch the video, and then steal the code :)

How it Works

  1. Add the ID my-mega-menu to your Beaver Builder menu.
  2. Create a Beaver Themer part, make it visible on the entire site.
  3. Create Rows inside the Themer part
    • For each menu item, create a Row and give the row a special ID. this is where the code does its magic
      • The code takes the menu item name, and looks for a lowercase version, with dashes for spaces, starting with "mega-"
      • Contact Us menu item would have an associated mega menu ID of mega-contact-us
      • About maps to mega-maps
      • Services -> mega-services
      • The code does the rest.

The JS:

To add JS sitewide:

  1. Open any page with Beaver Builder
  2. Click the title bar in the upper left corner to open the Tools menu, then click Global settings.
  3. On the JavaScript tab, enter this JavaScript code.
  4. Click Save.
// 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 its  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');
}

The CSS:

To add CSS sitewide:

  1. Open any page with Beaver Builder
  2. Click the title bar in the upper left corner to open the Tools menu, then click Global settings.
  3. On the CSS tab, enter this CSS code.
  4. Click Save.
body:not(.fl-builder-edit) [id^="mega-"] {
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    z-index: 100;
}
.show-mega{
    visibility: visible !important;
    opacity: 1 !important;
}
body:not(.fl-builder-edit) [id^="mega-"]:hover {
visibility: visible !important;
opacity: 1 !important;
}
/* mobile stuffs */
body.show-mega-mobile [id^="mega-"]{
    visibility: visible !important;
    opacity: 1 !important;
}


/* small screens mega settings*/
@media (max-width: 767px){
    
    .mega-mobile-container{
        visibility: hidden;
        opacity: 0;
        position: fixed;
        top:150px;
        left: 0;
        bottom: 0;
        overflow-y: scroll;
        width: 100%;
        z-index: 100;
    }
    
    .show-mega-mobile .mega-mobile-container{
        visibility: visible !important;
        opacity: 1 !important;
    }
    
}
/* bigger screens mega settings*/
@media (min-width: 768px){
    
    body:not(.fl-builder-edit) [id^="mega-"] {
        visibility: hidden;
        opacity: 0;
        position: fixed;
        top:150px;
        left: 0;
        width: 100%;
    }    
    
    
}

Level up your Beaver Builder skills

Join 3,264 Beaver Builders and get our monthly-ish dish

We've got a million ideas that we've implemented on over 300+ BB enabled websites. Pop in your email below, and we'll let you know when a new post or plugin is available :)

Newsletter

"*" indicates required fields

This field is for validation purposes and should be left unchanged.

Spam sucks.