Beginner's Guide for WordPress / Start your WordPress Blog in minutes

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+

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

15 CommentsLeave a Reply

  1. 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.

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

  2. 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.

  3. 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

  4. 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.

  5. 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!

      • 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.

  6. 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

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

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

Leave A 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.