These menus are the menus that are hidden off canvas that can be pulled out from the left or right through a button click. Your website supports 1 of 4 options that are listed below. Note that you will only include one (1) off canvas menu configuration option.
1. Use if you want to include multiple menus in the off canvas menu for your site. Any menus that are included will pull out from the right. By default, this option is configured to include Menu 1 and Menu 2.
<IMPORT-OFFCANVAS>imports/offcanvas-menuAllRight.var</IMPORT-OFFCANVAS>
If you want to include additional menus or change the menus that are included in the menuAllRight configuration, you can add the following code before the import-offcanvas statement in your website configuration.
<HTML>
<OFFCANVAS>
<INCLUDE>
<MENU-1>true</MENU-1>
<MENU-2>true</MENU-2>
<MENU-3>false</MENU-3>
<MENU-4>false</MENU-4>
<MENU-5>false</MENU-5>
<LEVELS>3</LEVELS>
</INCLUDE>
</OFFCANVAS>
</HTML>
2. Use the following option to pull out menu 1 from the left and menu 2 from the right.
<IMPORT-OFFCANVAS>imports/offcanvas-menuLeftRight.var</IMPORT-OFFCANVAS>
3. Use the following option if you will not be using pullout menus on your site. This is a performance optimization and will reduce the amount of code that is generated in your HTML page.
<IMPORT-OFFCANVAS>imports/offcanvas-menuNone.var</IMPORT-OFFCANVAS>
4. Use the following option to pull out menu 1 from the right and menu 2 from the left. This is the default off canvas menu configuration option for all sites.
<IMPORT-OFFCANVAS>imports/offcanvas-menuRightLeft.var</IMPORT-OFFCANVAS>
Once the menu configuration is in place, the system will generate the necessary off canvas menu structure for your site. You can then activate the menu through a simple button click by adding the following code to your site. Note that you can specify offCanvasRight or offCanvasLeft for the data-open attribute. The data-open attribute can be added to anything you can click to trigger the menu to open.
The first option will display a light color hamburger icon. Use for darker backgrounds.
<BUTTON class='menu-icon' data-open='offCanvasRight' type='button'></BUTTON>
The second option will display a darker color hamburger icon. Use for lighter backgrounds.
<BUTTON class='menu-icon dark' data-open='offCanvasRight' type='button'></BUTTON>
The following is an example of a standard hamburger menu icon that will pull the menu open for this site from the right.