MadMenu Vertical Menu Module

Divi MadMenu Vertical Menu module allows creating vertical navigations anywhere on the page: footer, sidebar, page content area as well as the popup menus created using the Divi MadMenu popups. The MadMenu Vertical Menu module is available since v1.9 of Divi MadMenu extension.

Getting Started

After you've installed and activated the Divi MadMenu extension open the Divi Builder layout where you would like to add a vertical navigation, click to add a new module and find the MadMenu Vertical Menu module in the modules modal. You can use the module search to find it easier by typing the madmenu keyword in.

Content Settings

The first thing you need to do after adding the module to your page layout is to select a menu. You can do that in the MadMenu Vertical Menu module content settings in:

MadMenu Vertical Menu Settings -> Content -> Menu -> Menu.

You can use a single menu for all devices, or select different menus for Desktop, Tablet and Phone. Note that you'll need to create all menus in Appearance -> Menus beforehand.

If your selected menu has lots of submenus and you would like to make it more compact you can use the Collapse Submenus setting to collapse the submenus. This will hide all submenus allowing users to toggle them by clicking their parent menu item (or it's arrow icon).

Enabling the Collapse Submenus feature will reveal other settings related to the submenus and the parent menu items:

1. Submenu Style - allows to select the collapsed submenus reveal style: either expand/collapse vertically(Expand) or slide in from right or left (Slide Right and Slide Left).
2. Parent Links Clickable - this setting allows to keep the parent menu links clickable(clicking the link redirects to the specified URL), while clicking the parent item arrow toggles the submenu.
3. Accordion Mode - allows only one submenu(of the same level) expanded at a time.
4. Parent Item Icon - here you can select the icon for the parent menu item (usually it's an arrow icon, but you're free to select any icon from the icons set currently available in Divi).
5. Animate Parent Item Icon - allows to make the parent item icon rotate or flip when clicked to expand/collapse the submenu.

Animating the parent item icon is available only for the Expand submenus style, the icon is idle by default and you can select either to rotate or flip it vertically or horizontally.

The two different styles available for the collapsed submenus - Expand(default) and Slide(available in two variations - Slide Right and Slide Left) - have slightly different sets of settings. 

Changing the collapsed submenus style to one of the Slide options(for example, Slide Right) makes the submenus slide in/out horizontally rather than expand/collapse vertically when the parent item or it's arrow is clicked. The Slide style reveals the following additional settings:

1. Use Submenu Header Text - allows to add/remove the Slide submenu header text.
2. Submenu Header "Home" Icon - allows to select the Slide submenu header "Home" button icon. Clicking this button scrolls the menu all the way back to the top level menu items.
3. Submenu Header "Back" Icon - allows to select the Slide submenu header "Back" button icon. Clicking this button scrolls the submenu one level back.

For the Slide submenu header text you can choose to display either the parent menu item text, use a custom text (for example, Back) or use no text at all but only the Home and Back buttons.

The Highlight Items On Scroll feature is useful for one-page layouts with anchor links in the menu. It toggles the active state for menu items with anchor links based on current scroll position to indicate which section is currently visible in the viewport. The active item text and background colors can be set in the Design settings.

The rest of the Content settings are standard module settings.

Design Settings

The MadMenu Vertical Menu module provides design settings for the menu items, submenu items, parent menu items as well as the menu in general(main menu container) and the submenus.

All the elements have full sets of design options available (colors, borders, box-shadow, spacing, etc.) except for the parent items and their icons which currently have only the color and background color fields available as well as the size setting for the icon.

For the Expand style submenu parent item and it's icon there are color options available also for the Open state (when the submenu is expanded).

Additionally, the parent items and the Slide submenu header elements(the header main container, header text, and the icons) can be fully customized using the available Custom CSS fields in 

MadMenu Vertical Menu Settings -> Advanced -> Custom CSS:

The rest of the Design and Advanced settings are standard module settings.