12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.

Menu with Expandable Sub Menus

Intro

This premium WordPress plugin adds a

[expandable-menu menu="Menu Name"]

shortcode which outputs the specified WordPress menu vertically with sub menus that are collapsed by default and can be expanded.

You can skip the menu parameter in the shortcode and just use

[expandable-menu]

if your menu is named Main Menu.

Multiple levels of menus are supported.

Use Case

Most themes and site builders come with a widget/component/element to display a mobile responsive menu when a hamburger menu is clicked/tapped. But there could be times when you want to show a menu already opened with expand/collapse feature support for the sub menus. This plugin solves this problem.

Below screencast shows this plugin’s shortcode in action along with other elements like a logo image and social icons in a modal component when using Oxygen:

If you want to watch a screencast of how the above can be built from scratch, click here.

Live Demo

Note

This plugin is meant to be edited (style.css usually) should you wish to customize it and will not receive auto updates. You can also add custom CSS to add or override the appearance in your child theme or in Customizer or in Manage > Stylesheets (if using Oxygen).

To change the links’ and sub menu button color to white, change the color property’s value from #333 to #fff for .expandable-menu .menu li a and .sub-menu-toggle in /wp-content/plugins/menu-expandable-sub-menus/assets/css/style.css. Also, add fill: #fff; for .sub-menu-toggle.

Terms

Single one-time purchase grants unlimited lifetime license for plugin use on your and/or your client sites.

Coupon

Members with lifetime access to premium tutorials in this site can find a $10 coupon below.

Plugin last updated on July 17, 2020.

FAQ

How to auto close the modal when a menu link is clicked?

This is useful for one-page websites where the menu items link to sections (hash links) on a single page.

Add a Code Block component at the very end in your Oxygen Template.

PHP & HTML

JavaScript

How to have the entire menu link clickable instead of just the arrows to expand and collapse?

In CSS set width to 100% and text-align to right for .sub-menu-toggle selector.

i.e., in /wp-content/plugins/menu-expandable-sub-menus/assets/css/style.css change this to this.

How to change the color of the arrow?

Add this sample CSS:

.sub-menu-toggle svg {
fill: #89cc67;
}

How to slow down the opening and closing animation?

Increase the value of transition-duration property for `.sub-menu-toggle svg` from 0.25s to say, 0.35s.

$30.00 - Purchase One-time purchase with use on unlimited sites - yours or your clients.
Table of Contents
Primary Item (H2)
angle-downmagnifiercrossmenuchevron-down