1. Home
  2. Documentation
  3. Pro Features
  4. Accordion Menu

Accordion Menu

Demo

Check out the menu on the left of this page to see a live demo of the Accordion menu.

Creating an Accordion Menu

Tip: If you are trying to add an accordion menu to a sidebar or page content, you can use the Widget or Shortcode method to add a new menu to your site.

Accordion menus are built in exactly the same way as a standard WordPress menu.

To switch your menu from a horizontal (default) to a vertical accordion menu, select “Accordion” from the Orientation dropdown in the Max Mega Menu settings:

accordion-wordpress-menu

The accordion menu will respect the ordering and hierarchy of the menu.

Just like any other menu created with Max Mega Menu, you have full control over the styling of the menu using the Theme Editor.

You can create as many accordion menus as you need, outputting each one using either a shortcode, widget or PHP code.

Accordion Behaviour

A new option – Accordion Behaviour – will appear when the orientation is set to ‘Accordion’. There are two options:

  • Keep Active Sub Menus Open – this will automatically open sub menus when you are on a sub page. This is the setting we’re using for the demo on the left (note how the “Pro Features” sub menu is automatically expanded because we’re on a sub page).
  • Always Close Sub Menus – all sub menus will be closed on page load. Users must click or hover over a heading to reveal a sub menu.

To avoid terrible menu design, the Event should be set to ‘Click‘ for accordion menus.

Accordion Menus respect the ‘Second Click Behaviour‘ setting defined under Mega Mega > General Settings. You can choose from ‘First click opens sub menu, second click closes sub menu’ or ‘First click opens sub menu, second click follows link’. Regardless of the option chosen, the Arrow indicator will always toggle the sub menu.

Accordion Menus also respect the ‘Mobile Menu Behaviour‘ setting defined under Mega Mega > General Settings. On the documentation menu to the left, we have it set to ‘”Standard – Open menus remain open until closed by the user”. It is also possible to set it to “Accordion – Open menus automatically close when another is opened”.

Like what you see? This functionality is available in Max Mega Menu Pro

Related Articles