e-addons

Share

ic Interface bwe-User Interface

Multilevel Menu

Highly mobile menu, quick to consult and intuitive.

Scroll through the navigation levels in a single space and optimize space and usability.

Triggers from select, icon or hambuger but also immediately open, a usable and quickly navigable menu
trigger 0
Opened
multilevelmenu trigger open
trigger 1
Select
multilevelmenu trigger select
trigger 2
Icon
multilevelmenu trigger icon
trigger 3
Hamburger
multilevelmenu trigger hamburger
multilevelmenu 1

Multilevel Menu

First select the WP Menu you previously generated from Apparence> Menu.

There are 4 triggers to manage the opening of the menu:

  • Immediately open (ideal for popup or directly on page)
  • From select with label
  • From icon
  • From hamburger

Positioning concerns: the menu as an object or the trigger button with respect to the menu.

For the select, icon and hamburger triggers, the menu can be positioned in 2 ways:

  • Floating under the button
  • OffCanvas with opening that can be positioned on the left or right

Styling animations can make navigations creative and adapt to layout needs.

Icon of Progression is the opening indicator when there are sub-elements.

Options

Some options allow you to view the menu with features such as:

  • Label Back or the item clicked
  • In case of trigger the menu will reset on closing
  • The clicked item will be displayed at the top in order to allow the click if linked
multilevelmenu options

Styles

multilevelmenu style panel

Panel

Colors, shape of the panel and menu items.

Items properties normal, hover and active status:

  • Typography
  • Colors of text and arrow
  • Background Color

Furthermore

  • Padding space
  • Border radius
  • Border style

The border between the entries might be different:

  • Item border separator

Trigger Button

The graphic appearance of the trigger button: select, icon or hamburger.

Properties normal, hover and active status:

  • Typography
  • Colors of text and arrow
  • Background Color

Furthermore

  • Padding space
  • Border radius
  • Border style
trigger 1
trigger 2
trigger 3
multilevelmenu style buttontrigger
multilevelmenu style backbutton

Back Button

The graphic characteristics of the back button if different from the menu items.

Properties normal and hover:

  • Typography
  • Colors of text and arrow
  • Background Color
Furthermore
  • Padding space

DEMO

Multilevel Menu

Base example