Responsive Web Design

I’ve been designing and building custom WordPress themes from scratch since 2009. Back on January 1 I switched to custom theming using the Genesis framework – not a huge transition but still something of a learning curve!

A few months ago I needed to create a sliding toggle menu for mobile browsers for a client’s site (see the final version to the right). I’d done this for other frameworks numerous times and had the code snippets for it. But getting it working in Genesis took some extra steps. Here we go…

I’m assuming here you’re already familiar with the Genesis framework, know how to properly enqueue scripts in WordPress, and know how to add elements to functions.php. I’m using a custom theme based on the Genesis Sample Theme.

Here’s a CodePen showing a simple version of the slideout menu:

See the Pen Slideout Menu based on Slideout.js by Debbie Campbell (@kanjigirl) on CodePen.0

1. Let’s start by registering a new custom menu for the slideout for mobile devices.

// Register new side menu
function register_side_menu() {
   register_nav_menu( 'side-menu',__( 'Side Navigation Menu' ));
}
add_action( 'init', 'register_side_menu' );

2. Then let’s build the function for adding this new menu to the site.

The #menu will go just after the opening body tag. Below that, everything else needs to be enclosed in the #panel div.

// Custom Slideout mobile menu
function custom_side_menu() { ?>
    <div id="menu">
        <div class="wrap">
            <!-- Side Menu Header -->
            <div class="menu-header">
                <span class="close-icon">Close</span>
            </div>
            <!-- Nav menu -->
            <div class="nav-menu">
            	<?php wp_nav_menu( array( 'theme_location' => 'side-menu' ) ); ?>
            </div>
        </div>
    </div>

    <div id="panel">
<?php
}
add_action( 'genesis_before', 'custom_side_menu' );

Using the ‘genesis_before’ hook drops this code into the page right after the opening body tag. We use media queries to hide the desktop menu on mobile and vice versa.

Notice we open #panel at the end of this function to enclose everything else below this point. So, we also need to add a closing tag for that div:

function close_panel() { ?>
    </div><!-- close Panel -->
<?php
}
add_action( 'genesis_after', 'close_panel' );

Using ‘genesis_after’ drops this code in just before the closing body tag.

3. Get the Slideout script and enqueue it in WordPress.

You’ll find it here: https://slideout.js.org/.

4. Add this code snippet to the Footer Scripts section on the Genesis Theme Settings page.

<script type="text/javascript">
jQuery(document).ready(function() {
  var slideout = new Slideout({ 
    'panel': document.getElementById('panel'),
    'menu': document.getElementById('menu'),
    'padding': 256,
    'tolerance': 70
  });
});
</script>

5. Your slideout  menu will need some CSS styling.

The CSS from the Slideout site is a good starting point.

body {
  width: 100%;
  height: 100%;
}

.slideout-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 256px;
  min-height: 100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 0;
  display: none;
}

.slideout-menu-left {
  left: 0;
}

.slideout-menu-right {
  right: 0;
}

.slideout-panel {
  position: relative;
  z-index: 1;
  will-change: transform;
  background-color: #FFF; /* A background-color is required */
  min-height: 100vh;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
  overflow: hidden;
}

.slideout-open .slideout-menu {
  display: block;
}

And now you should have a functional mobile Genesis slideout menu. Don’t forget to add media queries to control the display of this menu vs. the regular desktop one. 

Please let me know when you use this tutorial and if you have any problems, post in the comments.