Slide Out Menu with Popup Maker

Slide Out Menu Creation Guide with Popup Maker

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:

Standard WordPress Menu Setup

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.

Name and Title Your Popup

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:

https://gist.github.com/waltermesser/f3ac7ee57967beafe6e1d52574a4d6e5

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:

Create Content 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:

Non-Mobile Device Advanced Targeting Condition

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:

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:

Not setting cookies on this on demand popup

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:

Slide Out Menu Popup Display Settings

Close Settings

We only want this popup to close when a user clicks the button that closes the popup:

Slide Out Menu Popup Close Settings

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.

Content writer, WP Implementer, slice fixer.

Leave a Comment





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