#jPanelMenu ###Version 1.4.1 jPanelMenu is a [jQuery](http://jquery.com) plugin for easily creating and managing off-canvas content. Check out the [demo (and documentation) site](http://jpanelmenu.com) to see it in action. Check out the [changelog](#changelog) to see what’s new. #How Do I Use This Thing? Start off by including the jPanelMenu.js file in your page. (Bonus points for using the minified version [jPanelMenu.min.js], or for bundling the jPanelMenu code into your own JavaScript file to reduce size and HTTP requests.) Build your page as you normally would (the source order does not matter), and instantiate jPanelMenu by calling the plugin constructor function. var jPM = $.jPanelMenu(); By default, jPanelMenu will look for an element with an ID of `menu` to use as the menu, and elements with a class of `menu-trigger` to use as the trigger(s). Either use these IDs and classes on your elements, or pass a custom selector string pointing jPanelMenu to your menu and trigger elements in an object into the constructor function call, as follows: var jPM = $.jPanelMenu({ menu: '#custom-menu-selector', trigger: '.custom-menu-trigger-selector' }); **Note:** Check out the [options section]($options) for more customizable goodness like the above. After jPanelMenu has been instantiated (make sure to save the returned object to a variable, as shown above), it’s time to turn it on! jPM.on(); After that, jPanelMenu will be functioning, and that’s it! If you want to take things to the next level, keep reading. #How Does This Thing Work? When jPanelMenu is [turned on](#api-on), two `
` elements are created. The menu element (with an ID of `jPanelMenu-menu`), and the panel element (with a class of `jPanelMenu-panel`). In addition, a class of `jPanelMenu` is applied to the `` tag. The menu, `#jPanelMenu-menu`, contains the elements targeted by the menu selector passed into the jPanelMenu constructor function. By default, the targeted menu element is cloned into `#jPanelMenu-menu`, and is not removed from its original position in the DOM. This action can be overridden with the [`clone`](#options-clone) option. The panel, `.jPanelMenu-panel`, contains all of the content in the element specified by the [`panel`](#options-panel) option (except for the elements specified by the [`excludedPanelContent`](#options-excludedPanelContent) option). The selected content is moved, not cloned, into `.jPanelMenu-panel`. To style or select the menu, use the following selector: `#jPanelMenu-menu`. To style or select the content panel, use the following selector: `.jPanelMenu-panel`. When jPanelMenu is [turned off](#api-off), the two `
` elements are removed, all of the content inside `.jPanelMenu-panel` is moved back into the `` element, and the class of `jPanelMenu` is removed from the `` tag. #Does It Animate? Of course! (If you want it to, there’s an [option](#options) for that.) Animation is handled by CSS transitions, for browsers with support. CSS transitions are hardware-accelerated on supporting devices, so the animations are silky smooth. For browsers that do not support CSS transitions, the jQuery animation engine is used as a fallback. #Options The following options are set via an `object` passed into the constructor function call, as shown below. var jPM = $.jPanelMenu({ menu: '#menu', trigger: '.menu-trigger', duration: 300 }); *** ###menu A selector string pointing to the desired menu element. - **Data Type:** `string` - **Default Value:** `#menu` *** ###panel A selector string pointing to the desired root panel element. Point this to the element containing all content that should go into the panel. - **Data Type:** `string` - **Default Value:** `body` *** ###trigger A selector string pointing to the menu-triggering element. - **Data Type:** `string` - **Default Value:** `.menu-trigger` *** ###excludedPanelContent A selector string specifying which elements within the `` element should **not** be pushed into `.jPanelMenu-panel`. The selector string may contain any selector, not just tags. Generally, `