• 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

Responsive Web Design

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.

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

Weekly Links Roundup – Mobile Design, Plugins, Web Fonts, HTTPS

November 17, 2017 by Debbie Campbell

The top website and marketing links of the week.

It’s common for clients to make assumptions about mobile design (users never scroll; I have to cut back on content for phones). But many of them just aren’t true! Learn about mobile design myths and how to go beyond them to provide a truly useful and enjoyable experience for phone users.

Is there such a thing as too many WordPress plugins? Maybe… I’ve seen as many as 35 on a single website, and IMO that’s a bit much… but it really depends on the plugins themselves. You can have one badly-built plugin that slows down your entire site – or 20 good plugins that do their job and keep your site running well. Learn about plugin usage and why it’s okay.

Speaking of performance…

I like using custom web fonts; they can really enhance a site’s design. Typography is a great tool for helping your site stand out. But they can affect performance, especially if you use more than a couple of fonts. Learn about web font performance and the pros and cons of using them.

Finally…

You’ve probably been hearing a lot about SSL and HTTPS lately – but what exactly are these things, and why does your site need them? Here’s a guide to the basics of HTTPS – which every site should now be using! If you’re not and need help, get in touch.

 

Filed Under: Website Performance, Security, Web Design, Web Typography, Plugins, Responsive Web Design Tagged With: web fonts, wordpress plugins, performance, https, mobile design, responsive design

Weekly Links Roundup – Website Problems, Nofollow, Android vs iPhone, Local Competition

October 27, 2017 by Debbie Campbell

The top website and marketing links of the week.

I’m on a constant campaign to get my clients to overcome these common problems that hold their websites back. Mobile-unfriendliness, low-quality (or mostly absent) content, free website builders, and lack of trackable conversions are always issues that can be fixed to make your site a more powerful marketing tool.

What is the “nofollow” tag, and when and how would you use it? Learn how to use nofollow to avoid passing linkjuice to sites that may be in any way questionable.

Here’s something interesting (if a bit clickbait-y): did you know that research suggests that iPhone users spend more on online transactions than Android users? See what’s behind this and how you might use it in your marketing efforts. Make your own decision as to its validity!

Finally… if you’re in a battle for customers and conversions with other local businesses, learn how to perform a basic local business competitive audit. This can help you identify why Competitor A is doing better in Google Search than you are.

Filed Under: SEO, Website Content, Measuring Website Success, Responsive Web Design Tagged With: conversions, marketing, nofollow, android vs iphone, local search

Weekly Links Roundup – Social Media, Responsive Websites, Website Maintenance

September 15, 2017 by Debbie Campbell

The top website and marketing links of the week.

Is your business late to jump on the social media bandwagon? Are you unsure if or how social media can help your business? This post is for you – learn 3 ways that social media can help drive business growth.

I’m in the process of convincing clients with older sites that yes, it really does matter that their 2009 site is unusable in phones. Here’s a post covering 8 stats about responsive websites that you may not have considered. If you have a mobile-unfriendly site, please put a redesign in the budget as soon as possible. You’re hurting your business by giving your users a poor experience, as well as being penalized by Google in search results. It matters.

Finally – website maintenance. They all need it, especially if you’re using a platform like WordPress. If you’re ignoring it, it’s a matter of time until a disaster occurs (minor or major). How will you recover? Learn about the risks, and contact me if you need help maintaining your WordPress site. I have a service that does just that for small business owners: WP Minder.

 

Filed Under: Social Media, Responsive Web Design Tagged With: seo, social media, wp minder, responsive web design, website maintenance

Friday Link Wrapup – Mobile Friendly Sales, SEO Basics, Online Payments, Getting People to Sign Up

November 25, 2016 by Debbie Campbell

The top website and marketing links for this week.

Still clinging to that old website that isn’t mobile-friendly? Techcrunch reports that yesterday was the biggest shopping day on Thanksgiving ever – $1.15 billion in sales by 5pm. And 54% of visits – $449 million of sales – of that was on smartphones and tablets. Do your customers and your business a favor and upgrade to a mobile-friendly site – I can help.

If you’re new to the world of SEO or thinking about how to get your website to rank higher, here’s a good introduction to SEO basics for small business owners. Hint: start with regular infusions of high-quality content.

Finally – do you use a popup on your site to encourage people to sign up for a mailing list? You might want to rethink that. Learn how you might be damaging the user’s experience as well as your credibility by pressuring users to sign up, and learn how to do it less irritatingly.

Filed Under: Ecommerce, SEO, Responsive Web Design Tagged With: mobile friendly, seo, recurring payments, stripe, popup, sign ups

Friday Link Wrapup – Mobile yet Unfriendly, Security Threats, Marketing Stats

October 28, 2016 by Debbie Campbell

The top website and marketing links for this week.

Is your website mobile-friendly (yay!) but ridiculously hard to use on a phone? If that’s the case, you need to read “How to Poison the Mobile User” to understand how your website may be impacting your customers and sales. And then contact me because I can help you.

Ever been hacked? Ever known someone who was? It’s very common, impossible to prevent, and can leave a big mess to clean up for the website owner. If it’s all Greek to you, here’s a quick primer on the 3 most common types of web security threats and what you can do to reduce your risk.

And finally – for marketers: if you’re in charge of online marketing for your business (or you are your business and the task falls to you, like everything else does), how do you know where to find marketing statisics relevant to you? Here’s a list of the 10 top free resources for marketing data for 2016.

 

 

Filed Under: Security, Self-Promotion and Marketing, Website Usability, Responsive Web Design Tagged With: mobile friendly, marketing statistics, responsive web design, web security

  • Go to page 1
  • Go to page 2
  • Go to Next Page »

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