Off Canvas Sides

Off Canvas Sides provide additional menu options that don't clutter up your web page. You can use off canvas sides on a single page, a group or related pages, or all your pages.

Instructions

Off Canvas Sides

In this tutorial, we’ll demonstrate how to update, add or remove the Off Canvas Side(s) components.

Off Canvas Sides provide additional menu options that don’t clutter up your web page. You can use off canvas sides on a single page, a group or related pages, or all your pages. They work nicely on desktop as well as mobile. With a simple click or drag of a button, the entire left or right side of the page will slide open, to reveal additional menu items, search components or anything else you may want to include in your hidden menu.

The Off Canvas Sides are completely optional, so they are only included in the demo pages within your ( Pages ) folder. You won’t find them on any other pages of your template. You will need to add them to the pages you want them displayed on.

**IMPORTANT**

You can include an Off Canvas Top, OR an Off Canvas Side component, but not both in the same page. These 2 component types will not function together.

In this tutorial we’ll cover the following topics:

  1. inserting an Off Canvas Menu into a web page
  2. update the links

Inserting an Off Canvas Menu into a web page

The Off Canvas Menu’s and Library page components. You would insert your Off Canvas Menu as you would any Library page. The difference being you insert them at the very top of the page, just under the opening <body> tag. You’ll need to do this in code view.

  1. Determine which Off Canvas Menu you want to use, by previewing the demo pages included in the ( Pages ) folder.
  2. Once you’ve decided which ‘Off Canvas Side’ to work with, keep the demo page open, switch to code view, and scroll down to the opening <body> tag.
  3. Select the ‘webbot’ Library link and copy ( Ctrl+C ).
  4. Open the web page you want to add your Off Canvas Menu too.
  5. Switch to ‘Code’ view.
  6. Scroll to the open <body> tag.
  7. If your page is currently displaying the ( Off Canvas Top ) component, remove this first, if not continue onto the next steps.
  8. Insert our cursor into the editable ( dashboard ) region just below the body tag.
  9. Right click and select Paste or just ( Ctrl+V ) to paste the copied webbot code from the demo.
  10. If the demo page IS NOT in the same folder as the page you are copying the webbot into, make sure to update the link to the “../Library/…” page.
    • if moving ‘up’ a folder level as remove the ../ infront of the “../Library…” link.
    • if moving ‘down’ a folder lever, add another ../ as in “../../Library/…..
  11. Save your page, and preview!

Updating the links

Updating the links in the Off Canvas Menu is the same as updating the links in the Top Menu. The menu’s are based on a un-ordered list. Updating the list items and linking to new pages is the same as with the Menu Top. The exception to this is the ( Off Canvas Dual Sides ) component. With this component the ‘right’ side of the page uses a unique combination of linked and unlinked text, to help create the alphabetical headings. Watch the video below for details.

  1. Expand the Library / shared / off-canvas (folder).
  2. Open the Library page you associated with your menu.
  3. Update the un-ordered list, and link your items to your new pages.

Off Canvas Sides

In this tutorial, we’ll demonstrate how to update, add or remove the Off Canvas Side(s) components.

Off Canvas Sides provide additional menu options that don’t clutter up your web page. You can use off canvas sides on a single page, a group or related pages, or all your pages. They work nicely on desktop as well as mobile. With a simple click or drag of a button, the entire left or right side of the page will slide open, to reveal additional menu items, search components or anything else you may want to include in your hidden menu.

The Off Canvas Sides are completely optional, so they are only included in the demo pages within your ( Pages ) folder. You won’t find them on any other pages of your template. You will need to add them to the pages you want them displayed on.

**IMPORTANT**

You can include an Off Canvas Top, OR an Off Canvas Side component, butnot both in the same page. These 2 component types will not function together.

In this tutorial we’ll cover the following topics:

  1. inserting an Off Canvas Menu into a web page
  2. update the links

Inserting an Off Canvas Menu into a web page

The Off Canvas Menu’s and Library page components. You would insert your Off Canvas Menu as you would any Library page. The difference being you insert them at the very top of the page, just under the opening <body> tag. You’ll need to do this in code view.

  1. Determine which Off Canvas Menu you want to use, by previewing the demo pages included in the ( examples ) folder, located inside the ( Library / shared / off-canvas-sides ) folder.
  2. Open the page you want to add your Off Canvas Menu too.
  3. Switch to ‘Code’ view
  4. Scroll to the open <body> tag
  5. If your page is currently displaying the ( Off Canvas Top ) component, remove this first, if not continue onto the next steps.
  6. To remove the ( off canvas top ) click on the ‘yellow’ highlighted code in the code view, then look down to the Quick Tag Selector toolbar and click the [ <mm:libitem> ] to select the entire Library item.
  7. When the ‘yellow’ code turns to ‘blue’ you’ve selected the item correctly, just press the Delete Key on your keyboard.
  8. Leave your cursor into the editable ( and now empty space ).
  9. Display your Assets Panel ( Windows >> Assets ) or press F8 on the keyboard.
  10. Scroll through the list, and look for the “off-canvas-type-wrapper” Library Asset ( where ‘type’ is the name of the specific menu )
  11. Make sure to select the ‘wrapper’ not the Library page itself.
  12. With the Asset ‘wrapper’ page selected, click the ‘Insert’ button at the bottom of the Assets panel.
  13. Save your page, and preview!

Updating the links

Updating the links in the Off Canvas Menu is the same as updating the links in the Top Menu. The menu’s are based on a un-ordered list. Updating the list items and linking to new pages is the same as with the Menu Top. The exception to this is the ( Off Canvas Dual Sides ) component. With this component the ‘right’ side of the page uses a unique combination of linked and unlinked text, to help create the alphabetical headings. Watch the video below for details.

  1. Expand the Library / shared / off-canvas (folder).
  2. Open the Library page you associated with your menu.
  3. Update the un-ordered list, and link your items to your new pages.