• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Red Kite Creative logo

Red Kite Creative

  • Web Design
    • Custom WordPress Website Development
    • Responsive Design
    • Completely Custom Web Design
    • Ecommerce Website Design
  • Site Management
    • WordPress Maintenance and Support
    • WordPress Performance Optimization
    • WordPress Training and Consulting
  • Portfolio
    • All Projects
    • WordPress
    • Ecommerce
  • About
    • About Red Kite
    • What We Do
    • Working With Us
    • Testimonials
  • Blog
    • The “Minding Your Business” Blog
  • Contact

Making a Custom Slideout Menu for Genesis

May 4, 2019 by Debbie Campbell

Slideout menu screenshotI’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.

Share this content...

Filed Under: Tutorials, Responsive Web Design Tagged With: genesis, slideout menu, mobile menus, mobile design

Previous Post
Next Post

Primary Sidebar

Categories

  • +News
    • Launches
  • Ecommerce
  • +WordPress Info
    • Plugins
    • Website Performance
  • +Getting Help
    • Hiring a Web Professional
    • Consulting
  • Hosting
  • +Productivity
    • Client Relationships
    • CRM
  • +Resources
    • Analytics
  • +Security
    • Privacy
  • +Self-Promotion and Marketing
    • Blogging
    • Business Credibility
    • Measuring Website Success
    • Branding
    • Newsletters and Email Campaigns
    • Video Marketing
    • SEO
    • Podcasting
    • Social Media
    • Website Content
    • Establishing Trust
  • Scams
  • -Training
    • Tutorials
  • -Web Design
    • Website Usability
    • Graphic Design
    • Website Forms
    • CMS
    • Ecommerce
    • Responsive Web Design
    • UX
    • Information Architecture
    • Web Typography
    • Conversion Rates
© Copyright 2022 Red Kite Creative LLC · All Rights Reserved · Client Support · Privacy
Mmm, cookies! This website uses cookies to give you the best user experience. Manage cookies >View cookie policy >Accept
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website.

We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.

Learn more about our privacy policy.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT