Animated Off-Canvas Menu
Updated over a week ago

The Animated Off-canvas menu is positioned outside of the viewport and slides in when activated. It displays a fullscreen menu that appears when you click on the icon.

Fullscreen structure

Settings

In the settings you can choose:

  • the menu, from the appearance menu screen;

  • the depth of the menu, how many levels of the hierarchy are to be included. 0 means all;

  • the menu icon alignment;

  • the position of the menu on fullscreen;

  • if you want to show or hide the side background on fullscreen;

  • if you want to add a template after the menu on fullscreen.

Style

Menu

  • the width of the menu on fullscreen. It's a responsive value so you can choose a different value for each device;

  • the alignment of the menu on fullscreen;

  • the typography for each item of the menu on fullscreen;

  • the typography for each sub-items of the menu on fullscreen (if you set a depth > 1 and the menu has got sub-items);

  • the size of the indicator for children.

Colors

  • the background of the menu; you can choose between classic or gradient.

  • the text color;

  • the color of the indicator, when the item has children;

  • the background of the indicator, when the item has children.

Space

  • padding on the menu on fullscreen;

  • the space between menu items;

  • the space between menu sub-items;

  • the space of the children indicator;

Menu Icon

  • here you can choose the menu icon type between bars, custom icon, bars round, and a lot of other types;

  • the size of the menu icon;

  • the fill color of the menu icon;

  • the hover animation timing function;

  • the padding of the menu icon;

  • the background of the menu icon. You can choose between classic or gradient;

  • the border type of the menu icon;

  • the border radius of the menu icon;

  • the box shadow of the menu icon;

Side Background

  • choose the background type of side background between classic or gradient.

Close Button

You can choose if you want to enable the close button. If you set it to Yes you can choose:

  • the close type between X, icon, image, or text;

  • the close color;

  • the background color;

  • the border type;

  • the close size;

  • the close width;

  • the close size;

  • the position Y and X of the close button.

Did this answer your question?