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!
