Adding a fly-in side menu to the BeaverBuilder theme

A few months ago we were provided a design spec for a client site that required a button which, when clicked, would open a ‘fly-in’ menu appearing from the side — in this case the right side of the screen.

This guide will show you how to add such a menu to the BeaverBuilder theme, though it should be doable with any theme that offers decent hook points.

1. Create a Menu & Trigger Button

Head to your theme’s functions.php file and insert this code which will create the menu location and trigger button to open/close the menu:

/**
 * Custom Fly-In Menu (right)
 */
function ws_register_my_menus() {
 register_nav_menus(
 array( 
 'flyin_navigation' => __( 'Fly-In Menu' ), 
 )
 );
} 
add_action( 'init', 'ws_register_my_menus' );
function ws_default_flyin_nav_message() {
 echo "<ul id='flyin' class='nav'><li>Fly-in Menu</li></ul>";
}
function ws_insert_flyin_menu() {
 wp_nav_menu(array(
 'theme_location' => 'flyin_navigation',
 'container' => false, // 'div' container will not be added
 'menu_id' => 'flyin',
 'menu_class' => 'nav', // <ul class="nav"> 
 'fallback_cb' => 'ws_default_flyin_nav_message',
 )); 
} 
add_action( 'fl_body_open', 'ws_insert_flyin_menu' );
/* Fly-In Toggle */
function ws_insert_flyin_menu_toggle() {
 echo '<div id="flyin-toggle" data-toggle="collapse" data-target="#flyin.nav"><span>MORE <i class="fa fa-bars"></i></span></div>'; 
} 
add_action( 'fl_before_header', 'ws_insert_flyin_menu_toggle' );

2. Javascript to activate the toggle

You can place this wherever you prefer to insert Javascript. Since it’s global and tied more to the theme than the BB plugin, I used Customizer and added it under Code > JavaScript Code.

jQuery(document).ready(function(){
 
 var flyin_toggle = jQuery('#flyin-toggle');
 var flyin_orig_pos = jQuery('#flyin.nav').css('right');
 var flyin_more_text = jQuery('#flyin-toggle').html();
 var flyin_less_text = '<span>LESS <i class="fa fa-times"></i></span>';
 
 jQuery('#flyin-toggle').toggle(function() {
 flyin_toggle.hide();
 jQuery('#flyin.nav').css('right',0);
 flyin_toggle.html(flyin_less_text).delay(500).fadeIn();
 }, function() {
 flyin_toggle.hide();
 jQuery('#flyin.nav').css('right',flyin_orig_pos);
 flyin_toggle.html(flyin_more_text).delay(500).fadeIn();
 });

});

3. The Visual Styles & Animations

I used the following CSS for basic styling, added to the child theme’s styles.css, but you could also throw that under Customizer’s CSS editor if you prefer. Presumably some of the positioning will need to be adjusted depending on your theme’s existing styles, menu and header locations, etc.

/**
 * Fly-in Navigation
 */
#flyin-toggle{
 position: fixed;
 top: 12px;
 right: 20px;
 z-index: 102; /* Layer above fixed header (@100) */
 cursor: pointer;
}
.admin-bar #flyin-toggle{ top: 43px; }
@media screen and (max-width: 767px){ 
 #flyin-toggle{ position: absolute; } 
 .admin-bar #flyin-toggle{ top: 12px; }
}
#flyin.nav{
 position: fixed;
 z-index: 101; /* Layer below toggle */
 right: -300px;
 left: auto;
 min-width: 300px;
 width: 300px;
 height: 100%;
padding-top: 46px;
 padding-left: 20px;
 padding-right: 20px;
-webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 -ms-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
}
#flyin.nav > li{
 display:block;
 text-align:left;
 font-size: 14px;
}
#flyin.nav > li a{
 padding: 7px 0;
}
#flyin.nav > li:hover a{ background-color: transparent; }
#flyin.nav > li:first-child{ border-top: 1px solid black; padding-top: 14px; }

That should cover everything. Enjoy!