Categories:

Home / Free JavaScripts / Menu and redirection / Here

Cut & Paste Off canvas side bar menu

Credit: JavaScript Kit

Description: Off canvas side bar menu creates a content displacing menu heralded in mobile apps and sites alike. When the user clicks on a menu icon, the page contents shift to the right to reveal a side bar menu. This mobile centric menu works in all modern browsers and platform; in IE8 and IE9, a more limited interface is presented.

The markup for the off canvas menu is neatly defined inside an external HTML and fetched via Ajax, so changes to the menu are done in a central location and instantly reflected on all pages that utilize the menu. Cool!

Example (click on toggler below):

Directions:

Step 1: Add the following code to the <HEAD> section of your page:

Download the following three external files and upload to same directory as where your webpage resides:

Step 2: Then, simply add the below menu "toggler" anywhere on your page to toggle the menu:

Besides the primary toggler above, you can also create arbitrary links that toggle the menu, or even control the menu's state inside your own scripts by calling the below function:

offcanvasmenu.expandoffcanvasmenu(state)

The parameter "state" can be one of the follow: "open", "close", or empty (no parameter) to simply toggle the menu state, such as:

<a href="#" onClick="offcanvasmenu.expandoffcanvasmenu('open'); return false">Open Menu link</a>
<a href="#" onClick="offcanvasmenu.expandoffcanvasmenu('close'); return false">Close Menu link</a>
<a href="#" onClick="offcanvasmenu.expandoffcanvasmenu(); return false">Toggle Menu link</a>

The following arbitrary link opens the off canvas menu when clicked on:

Open Menu link

Modifying the menu

The markup for the off canvas menu is defined by default inside the file offcanvasmenucontent.htm:

<input type="checkbox" id="togglebox" />
<input type="checkbox" id="checkedselectorsupport" checked="checked" />

<nav id="offcanvas-menu">

<label for="togglebox" id="closex">Close</label>
<ul>
<li><a href="http://www.javascriptkit.com">Home</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/javatutors">JS Tutorials</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>

</ul>

</nav>

<div class="overlay"><label for="togglebox"></label></div>

To modify the menu contents, you should only edit what's in between the <NAV> element, or the portion in bold. The other elements make up the UI of the menu and should not be changed.

The IDs in red can be changed if they clash with existing CSS class names on your page, but if you do, make sure the same change(s) are reflected inside the elementids variable near the top of offcanvasmenu.js.

Customizing the style/width of the menu

The default width of the off canvas menu is 250px. To change it to another value, modify all instances of "250px" inside offcanvasmenu.css to the desired value. It's insufficient just to change the menu's width property value, as other facets of the menu UI such as how much to shift the BODY contents are also tied to the width of the menu.

Refer to the comments inside offcanvasmenu.css to customize the style of other areas of the menu such as background color, transition duration etc.

The <div id="contentarea"> element

When the script is run, it automatically wraps your entire BODY contents in a <div id="contentarea"> element so the contents can be shifted to the right when the menu opens. This element is relatively positioned as defined inside offcanvasmenu.css. If this somehow disrupts the layout of your page, try removing "position:relative" inside div#contentarea{}. Also, if you wish to modify the ID value "contentarea", do so inside both offcanvasmenu.css and the elementids variable near the top of offcanvasmenu.js.

A note on mobile and responsive design- the "viewport" meta tag

The code you copied inside Step 1 contains the meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

This tag is necessary in order for the defined CSS media query mentioned above to work property. For more info on this tag, see "The viewport meta tag- the key to preparing a page for mobile devices optimization".


JavaScript Tools:
Site Info


CopyRight (c) 2018 JavaScript Kit. NO PART may be reproduced without author's permission. Contact Info