Cut & Paste Off canvas side bar menu
|
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:
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".