DigitalRefresh
10/7/2019 - 2:22 PM

Beaver Builder Mega Menu #bb

  1. Activate: Dashboard -> Appearance -> Menus -> Screen Options -> Check the "CSS Classes" checkbox
  2. Add Css class to parent menu item for mega childs
  3. Create BB template & assign css class from step2 to row
  4. Add code to functions.php step3 template slug
  5. Create new js file bb-mega-menu.js
  6. add enqueue to functions.php
  7. add style to css file
functions.php
content_copyfile_download
//Beaver builder mega menu as a template using fl_builder_insert_layout shortcode.
//Change mega-menu with your template slug
function bb_mega_menu() {
\!h    printf( '<div class="bb-mega-menu-tpl" style="display: none;">%s</div>', do_shortcode( '[fl_builder_insert_layout slug="__mega-menu__"]' ) ); 
  }
add_action( 'wp_footer', 'bb_mega_menu', 1 );
bb-mega-menu.js
content_copyfile_download
(function($) {
	
	bbMegaMenu = {
	  \!h parent_menu_class : [ "__parent-menu-css-class__", "__accessories__" ],
		
        sub_menu_arrow: '<button class="ast-menu-toggle" role="button" aria-expanded="false"><span class="screen-reader-text">Menu Toggle</span></button>',
        
		sub_menu : '<ul class="sub-menu"><li><div class="fl-builder-content"></div></li></ul>',
		
		init: function()
		{
			bbMegaMenu._addMegaMenuPanel();
			
			if( $('body').hasClass('fl-builder-edit' ) && FLBuilder !== 'undefined' ) {
				FLBuilder.addHook( 'didPublishLayout', bbMegaMenu._addMegaMenuPanel);
				FLBuilder.addHook( 'didCancelDiscard', bbMegaMenu._addMegaMenuPanel);
				FLBuilder.addHook( 'previewLayout', bbMegaMenu._addMegaMenuPanel);
				FLBuilder.addHook( 'restartEditingSession', bbMegaMenu._addMegaMenuPanel);
				FLBuilder.addHook( 'endEditingSession', bbMegaMenu._addMegaMenuPanel);
			}
		},

		_addMegaMenuPanel: function()
		{
			$( bbMegaMenu.parent_menu_class ).each( function( index, value ) {
				var parent_li = '.ast-nav-menu > li.' + value,
					bb_mega_menu_row = "div." + value + "-sub-menu";
				
				if( $( parent_li ).length > 0 ) {
					
					if( $( parent_li + ' .sub-menu' ).length <= 0 ) {
                    	$( parent_li ).append( bbMegaMenu.sub_menu_arrow );
						$( parent_li ).append( bbMegaMenu.sub_menu );
					}

					if( ! $('body').hasClass('fl-builder-edit' ) 
					&& $( '.site-main ' + bb_mega_menu_row ).length <= 0  
					&& $( ".bb-mega-menu-tpl " + bb_mega_menu_row ).length > 0
					) {
						$( ".bb-mega-menu-tpl " + bb_mega_menu_row ).appendTo( parent_li + ' .sub-menu .fl-builder-content' );
					}

					if( ! $('body').hasClass('fl-builder-edit' ) 
					   && $( '.site-main ' + bb_mega_menu_row ).length > 0 )
					{
						$( parent_li + ' .sub-menu .fl-builder-content' ).empty();
						
						var row_clone = $( '.site-main ' + bb_mega_menu_row ).clone();
						row_clone.appendTo( parent_li + ' .sub-menu .fl-builder-content' );
					}
					
					if( $('body').hasClass('fl-builder-edit' ) && $( '.site-main ' + bb_mega_menu_row ).length > 0 ) {
						$( parent_li + ' .sub-menu .fl-builder-content' ).empty();
					}

					$( parent_li ).addClass( 'has-mega-menu menu-item-has-children' );
				}
			});
		}
	};

	$(function() {
		bbMegaMenu.init();	
	});
})(jQuery);
functions.php
content_copyfile_download
//enqueue bb-mega-menu.js file
function wpbw_mm_enqueue_styles() {
    wp_enqueue_script( 'mega-menu-script', get_stylesheet_directory_uri() . '/bb-mega-menu.js', array(), '1.0', true );

}

add_action( 'wp_enqueue_scripts', 'wpbw_mm_enqueue_styles', 15 );
style.css
content_copyfile_download
@media only screen and (min-width: 922px) {
	.ast-nav-menu .has-mega-menu {
		position: static;
	}
}
.has-mega-menu .sub-menu {
	width: 100%;
}