Slide out menus can be a great way to expand functionality on your site so we’ve created this step-by-step guide so that you can have an awesome and flexible slide out menu on your site.
Slide Out Menu Adds Versatility
A slide out menu can be used for almost anything – no…really – how many sites have you been on where you clicked a link or button and a popup window slid into view? 10? 20? …50?
They are so popular because it’s an easy to implement, extra dimension of your site, and most importantly, it’s also easy to use – and interact with. Did we mention you can use it for almost anything?
Plus, no coding required!
Oh right, and the obligatory: it works dynamically, you won’t be generating menus manually and it’s 100% responsive – the responsiveness may be a good thing, or it may be bad thing – an interesting topic we will dissect shortly.
Creating Your Own
Goals
As always, first consider your goals and what you’re trying to accomplish. For this guide, we’re going to be creating slide menu that is “User Navigation”.
This is popular use for slide and push menus, and once you’re logged into a site, you would then have access to a button or link to click open this special menu for users who are logged in.
Our special user menu is going include a user profile picture, the custom nav menu, and an ad.
Final Product Vid
Experience the Demo
Before We Get Started
Plugins Needed
- Popup Maker
- Menu Shortcodes – this plugin is in the queue to be approved by WordPress. For now, you can download the .zip directly from us.
- Advanced Targeting Conditions (optional)
- Duplicate Post (optional)
- Custom Scrollbar (optional)
Responsive or Fixed Width Popup for the Menu?
Consider what our goals are for this slide out menu – user navigation is the one main goal. Remember the 3 C’s of Navigation? Clean, clear, and concise.
The Problem
By default, all popups are responsive – it’s width will be a percentage of the device screen width. This means the smaller the screen, the smaller popup. A 25% width popup serves as a great working space for almost anything on a 1200 pixel screen, but on a 320 pixel screen, it’s basically useless.
As such, we have to make sure our popup slide menu stays nice and big on smaller devices, and doesn’t change at all on big devices.
For example, here’s an illustration that shows what happens when you have a 25% width responsive popup (serving as a slide out menu) spanning across different platforms:
Having a slide out menu that doesn’t work properly on small devices is like having no slide out menu at all.
Solution #1: Fixed Width
Simply setting your popup to display at a fixed width will keep it at that size on all devices. For our slide out menu, we must have a good width that will be both large enough for large screens but small enough for small screens, while not being too small, like above.
The smallest devices that are now years old top out at 320 pixels, so if we were to take the non-responsive solution, then we would set our popup width to 320 pixels. Here is what it would look like in our Popup Editor:
This solves the original problem because no matter what size the device is, the popup will always be 320 pixels wide. On the other hand, the popup will always be 320 pixels wide. It’s not a killer, but isn’t the best either. It is, however, better than having a super tiny slide out menu no one can read on their phone.
Pros
- Super quick and easy.
- Solves original problem.
Cons
- Fixed width, non-responsive.
Solution #2: Responsive Popups with Conditions
In this best-of-all-worlds scenario, we can create two popups, one for mobile devices and one for non-mobile devices.
We can create a slide out menu for mobile devices that takes up nearly the whole screen so that the navigation would be clean and clear.
Mobile devices do not include tablets, so tablets will be using the non-mobile sized slide out menu.
For the non-mobile devices, we’ll set the popup to take up a fourth screen so the nav menu is simple, clean, and has plenty of working space.
Using our Advanced Targeting Condition Extension, we then call one of the correct popup depending on what device the user is browsing with. Using this extension allows us to get the best of both worlds and keeps our menu flexible and versatile, without limitations.
In the screenshot below, I’ve set one of our popups to be called only when the device is a mobile device:
Sounds like a lot of work, right? Wrong! Using Duplicate Post makes creating and managing the two popups quick and easy.
Plus, since each device has it’s own special popup, we can easily add special styles that will only effect that popup on that device using the #popmake-ID CSS Selector. We’ll be able to target both popups simultaneously, or exclusively. Also, we won’t have to worry about messing up other mobile styles we may have already coded, or we can use them if we like as well.
Pros
- Fixes original problem
- Maintain site wide and menu flexibility and versatility
- No limitations
- Easily add special styles
Cons
- Slightly more setup
- Requires Advanced Targeting Conditions
- Requires Duplicate Post (totally free)
Final Thoughts on the Solutions
For you, just like us, it depends on your slide out menu, it’s goals, and how you’re going to implement it to achieve those goals.
Will it be best for your goals and implementation to go with solutions #1? Or would it be best to go with #2?
For our menu, we’re going with solution #2. We want the most flexibility, the most versatility, and we don’t want any issues down the road.
Solution #2 delivers all these for us, and we only have to sacrifice a tiny amount of time relative to the benefits – a natural born no-brainer.
With all of our preliminary stuff out of the way, let’s make us a sliding menu!
Create Our Menu
The menu creation process here is no different than creating a standard menu in WordPress. Navigate to Appearance Menus.
We called our menu “Slide Out Menu”. Remember what you named your menu, we’ll need that in a few minutes:
Install and Activate Menu Shortcodes
Now that we have created our menu, we’ll need the plugin Menu Shortcodes. This plugin will allow us to call any menu and put it anywhere that we can use a shortcode. We’re going to put our menu in the popup using the shortcode provided by this very simple and lightweight plugin. The menu will then display in an accordion format.
Once you’re updated, we can create the popup!
Create Our Popup
We’re going to create the popup for the non-mobile devices first. From the WP Admin, navigate to Popup Maker Popups Add New.
If you haven’t been here before, welcome to the Popup Editor!
Name and Title
Name and title your popup as you see fit. We like to include ‘popup’ in our popup names because it makes triggering them later easier. Also, we’re going to exclude a popup title for this popup – this is optional content for all popups.
Content
Like we’ve determined earlier, the content will include a user image, navigation, and an ad. Everything is done normally, except the menu. To get the menu inside the popup, we’ll now use Menu Shortcodes.
Once you’ve installed the plugin, you can now call your menu anywhere using this shortcode:
We didn’t center the menu because of the way it will be displayed in the accordion doesn’t call for center alignment.
You can see the shortcode here in the WYSIWIG Popup Editor:
Advanced Targeting Conditions
As mentioned earlier, this popup will be for non-mobile devices only, and once we get this popup completed, we can easily duplicate and adjust it to make our mobile only version:
Triggers and Cookies
Since we’re doing a slide menu, we’re first going to make sure the popup displays when a user clicks the button or icon, which is the Click Open Trigger:
We obviously want the user to be able to see this nav menu content on demand, so we won’t be setting any cookies:
Display Settings
We use the following display settings to give this popup the look and feel of a slide out menu. There is nothing default about these settings because it’s unlike a typical popup and serves a different and unique purpose.
For example, two settings we would rarely change from default, we change from default in this implementation.
First, we made this a stackable popup because it’s possible the user could trigger another popup (Exit Intent, Scroll, etc.) while this popup slide menu is open. Second, we adjusted the z-index values for the popup and overlay so that when this situation does occur, the slide menu will be under the traditional popups.
We also included scrollable content because as our accordion menu expands and contracts, the popup has to adapt to the different heights. Don’t cringe at the thought of scroll bars – we have a slick solution for some minimalist and elegant scroll bars later in the guide.
Last, we chose to set the position to fixed as it prevents awkwardness if the user is scrolling through the popup to view the content.
Here’s a screen of our settings:
Close Settings
We only want this popup to close when a user clicks the button that closes the popup:
Conditions, Theme, and Publish
We leave conditions blank here, as we’ve already set Advanced Targeting Conditions. We have a special theme called “Slide Out Menu”, which we’ll do some customization to as well.
Publish
Once you publish the popup, all we have left is to do is clone, then trigger it on the front end.
Clone and Create Mobile Only Popup
As we clone this popup, take note of both popup ID numbers, we’ll need those if we’re to write custom CSS rules for both slide out menus simultaneously (or exclusively).
Using our handy Duplicate Post plugin, we can easily clone our current non-mobile only popup, and then adjust and rename the clone according to our mobile only specifications:
In this instance, we went with a 90% width for mobile only devices – this is the only change we need to make between the popups to achieve the look we’re going for across all platforms:
Click Triggers on the Front End
Now that we have both popups created, we can setup one button with two popup calls using #popmake-64 as the href, and the #popmake-356 as the class. Popup #64 is our non-mobile popup, and popup #356 is our mobile only popup.
Read more about Click Open triggers here.
Even though the element has two popups attached to it, only one popup will actually be available to be triggered. Which popup that will be depends on whether you’re using a mobile device or a non-mobile device according to the Advanced Targeting Conditions we setup earlier.
Here’s what our popup looks like so far – it includes the three elements mentioned earlier – the profile image, the accordion menu, and an ad:
Custom Looks
Function wise, this is a done deal, but naturally, we have to go next level. After adding some CSS, we have:
The Only Cure is More Scrollbar
The biggest issue for this popup is scrollbars – they’re ugly – and they’re finicky across browsers. As such, we’ll need a plugin to help us solve this problem.
Custom Scrollbar
In our testing, we found Custom Scrollbar to be a very lightweight and simple solution. This allows us to get re-style our scrollbars across all browsers easily – feel free to experiment with it on your own.
Using the following settings for the plugin and the CSS code below will net you a sleek, minimalist scrollbar, further enhancing the look and feel of our slide out menu:
When you customize your scrollbar settings, you can leave the colors (not pictured) as they are, we’re going to overwrite them with the CSS below to streamline them:
Final Product Screenshot
How ‘bout ‘dem scrollbars:
Desktop
Mobile
Since the Advanced Targeting Condition of “Device is Mobile” doesn’t operate according to screen resolution, but the device itself, we have to take screenshots from an actual mobile device to show you what it looks like – this is from an Android device:
Advanced Targeting Conditions Pays Dividends
It was worth the extra investment because, for us, it was such a comforting feeling knowing that our slide out menu is going to look great across all mobile devices.
We don’t have to worry if the menu is ever going to be too big, or too small, or too something for mobile devices because we have complete control over our mobile device only slide out menu.
Final Product Video
Experience the Demo
See it live on the Popup Maker Playground site.
