Actions
Switch Theme
Getting startedInstallation
Basics
SocialsYouTube
Facebook
Jose Tamu
July 16, 2024 /  Intermediate

Multi OffCanvas Menu

Multi OffCanvas Menu· Demo

How it works

Multi OffCanvas Menu consists of a collection of nested OffCanvas elements.
The initial OffCanvas is “OffCanvas Content” element, and all of your initial content has to be set here, including the toggles (at least the open toggles) used by “Sub OffCanvas” elements.
“OffCanvas Content” element is also the wrapper for all “Sub OffCanvas” elements.

Settings controls

Type: determines the origin of the initial offcanvas: From Left or From Right. The demo is From Right.
Duration
CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.
Custom toggle: menu’s toggle will be the Burger that comes with it by default but you can set your own here passed by it’s classname.

Backdrop animation controls

Multi OffCanvas Menu contains a backdrop, it’s styles can be set right at Backdrop element.
Duration
CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Sub OffCanvas controls

Each Sub OffCanvas element has it’s own controls:
Open toggle: the element that will open this Sub OffCanvas passed by it’s classname.
Close toggle: the element that will close this Sub OffCanvas passed by it’s classname.
The same element can be used at both Open toggle and Close toggle, so it will just act as a normal toggle.
Duration
CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

– Tamu

On this page