WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Themes» How to Add a Slide Panel Menu in WordPress Themes

How to Add a Slide Panel Menu in WordPress Themes

Last updated on October 31st, 2013 by Editorial Staff
79 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add a Slide Panel Menu in WordPress Themes

Recently one of our users asked us how they can replace their navigation menu with a jQuery slide panel menu? Slide panel menu can be used to greatly improve the user experience on mobile sites. In this article we will show you how to add a slide panel menu in WordPress themes.

Slide Panel Menu in WordPress Default Theme

Note: This is an intermediate level tutorial and requires sufficient HTML and CSS knowledge.

Replacing Default Menu With a Slide Panel Menu in WordPress

The goal here is to show a slide panel menu to users on smaller screens while keeping our theme’s default menu so that the users on laptops and desktops can see the full menu. Before we get started, it is important to know that there are many different WordPress themes, and you will have to deal with a little CSS later on.

First thing you need to do is open a plain text editor on your computer, like Notepad, and create a new file. Copy and paste this code:

(function($) {
$('#toggle').toggle( 
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }, 
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }
);
})(jQuery);

Replace example.com with your own domain name, and also replace your-theme with your actual theme directory. Save this file as slidepanel.js on your desktop. This code uses jQuery to toggle a slide panel menu. It also animates the toggle effect.

Open an FTP client like Filezilla and connect to your website. Next, go to your theme directory and if it has a js folder then open it. If your theme directory does not have a js folder, then you need to create one and upload slidepanel.js file into the js folder.

The next step is designing or finding a menu icon. Most commonly used menu icon is the one with three lines. You can create one using Photoshop or find one of the many existing images from google. For this tutorial we are using a 27x23px menu icon. Once you have created or found your menu icon, rename it to menu.png and upload it to the images folder in your theme directory.

The next step is to enqueue javascript file for slide panel in WordPress. Basically just copy and paste this code in your theme’s functions.php file.

 
wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20131010', true );

Now that everything is setup, you need to modify your theme’s default menu. Usually, most themes display navigation menus in theme’s header.php file. Open header.php file and find the line similar to this one:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

The goal here is to wrap your theme’s navigation menu with the HTML code to display your slide panel menu on smaller screens. We are going to wrap it in a <div id="toggle"> and <div id="popout">. Like this:

<div id="toggle"><img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Show" /></div>
<div id="popout">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</div>

Replace example.com with your own domain name and your-theme with your theme directory. Save your changes.

The last step is to use CSS to hide the menu icon for users with larger screens and display it to users with smaller screens. We also need to adjust the position of the menu icon and the appearance of the slide panel. Copy and paste this CSS to your theme’s stylesheet.

@media screen and (min-width: 769px) { 
#toggle {
display:none;
}

} 

@media screen and (max-width: 768px) { 
#popout {
position: fixed;
height: 100%;
width: 250px;
background: rgb(25, 25, 25);
background: rgba(25, 25, 25, .9);
color: white;
top: 0px;
left: -250px;
overflow:auto;
}


#toggle {
float: right;
position: fixed;
top: 60px;
right: 45px;
width: 28px;
height: 24px;

}

.nav-menu li { 
border-bottom:1px solid #eee; 
padding:20px;
width:100%;
}

.nav-menu li:hover { 
background:#CCC;
}

.nav-menu li a { 
color:#FFF;
text-decoration:none;
width:100%;
}
} 

Remember that your theme’s navigation menu could be using different CSS classes, and they may conflict with this CSS style. However, you can troubleshoot these issues by using the Chrome Inspector tool to find out which css classes are conflicting within your stylesheet. Play around with the CSS to match your style and needs.

We hope this tutorial helped you add a slide panel menu in WordPress using jQuery. For feedback and questions please leave a comment below and don’t forget to follow us on Google+

79 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

15 Comments

Leave a Reply
  1. Mohammad Kashif says:
    Mar 14, 2018 at 4:58 pm

    Awesome!
    Can i add close button in the popout?

    Reply
  2. Luke Marshall says:
    Jan 20, 2017 at 11:56 am

    I’m still waiting on a support ticket reply from you guys regarding this exact need! the one you offer is on the right side only with no apparent way to change it to the left, I’m glad I’ve found this.

    Reply
    • Cynthia says:
      Apr 25, 2017 at 2:58 pm

      Change the function “left” to “right” in the two spots it is used in the function code.

      Reply
  3. Ru says:
    Jun 15, 2016 at 4:33 am

    Do you have demo for this?
    I want to check it before

    Reply
  4. Daniel Jarosz says:
    Apr 28, 2014 at 3:24 pm

    clean & simple, thank You for this tutt!

    Reply
  5. Ann says:
    Mar 16, 2014 at 8:42 pm

    Hi, this code works perfectly when I run my website locally but not once it’s live. Is there any possible explanation to this? I updated the image links not sure what else needs to be updated as the folders have not changed.

    Reply
  6. Madiha says:
    Jan 9, 2014 at 3:45 pm

    its not working on my site plz visit and tell the solution
    http://www.dailynewscompany.com

    Reply
  7. Mattia says:
    Dec 7, 2013 at 6:43 pm

    Hi, interesting article… Do you have a DEMO of this, or a URL to an online site in which you implemented it? It would be interesting to see it in a real case, before trying to use it! Many thanks

    Reply
  8. Jim says:
    Nov 22, 2013 at 6:05 am

    Is it possible to show how the script could be modified so the close event can be triggered by clicking anywhere else but on the navigation?

    In other words, so the user doesn’t need to just click on the toggle menu icon to close the navigation sidebar?

    Thanks.

    Reply
  9. Karl says:
    Nov 22, 2013 at 2:53 am

    I am searching high and low for a plugin or the ability to implement the type of menu you have currently running at the top of your page. You have a “Play” button on the right side of your header. Upon pressing it a content area slides out from your header section. I really want to use this type of menu in my site. If you could point me even to a link where this type of menu is explained I’ll take it from there and thanks. This is an awesome tutorial!

    Reply
    • WPBeginner Support says:
      Nov 22, 2013 at 10:30 am

      Karl you can right click on the play button and select inspect element and study our source code. We will also try to cover it soon at WPBeginner as a tutorial.

      Reply
      • Shubham Dubey says:
        May 12, 2014 at 1:25 am

        Sorry for replying here,(Comments is not available)

        Hey! I’m using Genesis framework, with its child theme, i’m unable to find header.php file there,

        i just copied the header.php file from genesis to my child themes folder, but after opening header.php file didn’t found any lines :(

        hOW TO DO THIS WITH CHILD THEMES, PLEASE EXPLAIN.

        Reply
  10. Jim says:
    Nov 21, 2013 at 4:05 pm

    Excellent guide. I’m almost there with a test implementation, however I’m wondering…can I use a relative path in the sidepanel.js file instead of the absolute path?

    I’ve tried to do so but I cannot figure it out. Should the relative path be relative to the html file calling the javascript?

    Thanks

    Reply
  11. krish says:
    Nov 6, 2013 at 6:25 am

    It’s good and useful content. The screenshot and coding easily understand and apply to my website. Good job man!!!

    Reply
  12. Håkon Stillingen says:
    Nov 4, 2013 at 2:27 pm

    Interesting article. How would I go about replacing default header in Genesis Framework?

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
OptinMonster
OptinMonster
Convert website visitors into email subscribers. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
Beaver Builder Coupon Code
Beaver Builder Coupon
Get the best possible price on this easy drag-and-drop page builder plugin. From just $99 in 2020.
7Theme
7Theme Coupon
Get 10% OFF on Premium WordPress Themes by 7Theme.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.