Slide Out Menu with Popup Maker

Slide Out Menu Creation Guide with Popup Maker

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:

Cloning Our Slide Out Menu Popup

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:

Slide Out Menu Popup Width

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.

https://gist.github.com/waltermesser/9e0a9693922206fa18c7036c2a63eee9

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:

Slide Out Menu without TLC

Custom Looks

Function wise, this is a done deal, but naturally, we have to go next level. After adding some CSS, we have:

Slide Out Menu with TLC and Scrollbars

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:

Custom Scrollbar Settings

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:

https://gist.github.com/waltermesser/06bee2666dab12c6f112059fe5aa507b

Final Product Screenshot

How ‘bout ‘dem scrollbars:

Desktop

A Beautiful Slide Out Menu with Sleek Scrollbars A Beautiful Slide Out Menu with Sleek Scrollbars

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:

Our Slide Out Menu on Mobile Devices

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.

Content writer, WP Implementer, slice fixer.

Leave a Comment





This site uses Akismet to reduce spam. Learn how your comment data is processed.