Menu

Easily Navigate through the app using Menu. Here, you will find documentation for different types of menu, initialization options, collapsed, accordion, animation and color options one can use to meet requirements of his app.

In order to use Menu on your page, It is required to include the following vendors script in the "Vendors JS" area from the page's footer: 

<script src="assets/vendor/js/menu.js"><script>

Following are the available menu initialization options with data types, default values and description.

Option Datatype Default Value Description
orientation string "" The orientation of the menu. Possible values: "horizontal". Default menu orientation will be vertical.
animate boolean true Whether or not the menu should be animated.
accordion boolean true Whether or not the menu should be accordion.
showDropdownOnHover boolean true Whether or not the menu dropdown should open on mouse hover. This option only works for Horizontal menu.
closeChildren boolean true Whether or not the submenu items close when the parent menu item close.

Following are the events to hook in your functionality before / after menu open / close events.

Hook Description
onOpen Event is executed Before the menu opens.
onOpened Event is executed After the menu opens.
onClose Event is executed Before the menu close.
onClosed Event is executed After the menu close.

Basic Menu

Following are some examples of basic menu like vertical, horizontal (on click), horizontal menu (on hover)

Vertical
Horizontal
Horizontal (show dropdown on hover)

Add elements to your menu like user details or footer actions like in below example.

Elements

Without Accordion

Open / Close Menu without accordion. One has to manually open / close the menu items.

Vertical menu without accordion (Manually open / close)

Without Animation

Open / Close Menu Without Animation. One has to manually open / close the menu items.

Vertical menu without animation

Here's an example of basic menu theme .bg-menu-theme that has theme menu bg color.

Here is the theme menu bg color mixin which allow you to easily customize menu style by adding your own class and colors. 

@mixin template-menu-style($parent, $bg, $color: null, $active-color: null, $border: null, $active-bg: null)
@include template-menu-style('.bg-menu-theme', #fff, $color: #99a3b5, $active-color: $body-color, $active-bg: #f0f1f3);

Refer the table given below for all the variables of Menu

Variable Description
$menu-width Variable for menu width
$menu-font-size Variable for menu font size
$menu-collapsed-width Variable for collapsed menu width
$menu-item-spacer Variable for menu item spacer
$menu-vertical-link-padding-y Variable for vertical menu item top & bottom padding
$menu-vertical-link-padding-x Variable for vertical menu item left & right padding
$menu-vertical-menu-link-padding-y Variable for vertical menu link top & bottom padding
$menu-vertical-menu-level-spacer Variable for vertical menu level spacer
$menu-horizontal-link-padding-y Variable for horizontal menu item top & bottom padding
$menu-horizontal-link-padding-x Variable for horizontal menu item left & right padding
$menu-horizontal-menu-link-padding-y Variable for horizontal menu link top & bottom padding
$menu-horizontal-menu-level-spacer Variable for horizontal menu level spacer
$menu-sub-width Variable for submenu width
$menu-control-width Variable for control width
$menu-control-arrow-size Variable for menu arrow size
$menu-icon-expanded-width Variable for expanded menu width
$menu-icon-expanded-font-size Variable for expanded menu font size
$menu-icon-expanded-spacer Variable for expanded menu spacer
$menu-animation-duration Variable for menu animation duration
$menu-max-levels Variable for menu max levels
$menu-dark-border-color Variable for light menu border color
$menu-dark-menu-bg Variable for dark menu bg color
$menu-light-border-color Variable for light menu border color
$menu-light-menu-bg Variable for light menu bg color
© 2017- Pixinvent, Hand-crafted & Made with ❤️