jPanelMenu is a jQuery plugin that creates an animated paneled-style menu (like the type seen in the mobile versions of Facebook and Google). Animation is handled by CSS transitions for browsers that support it and 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.
Contents
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'
});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, two <div> 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 <html> tag.
The menu, #jPanelMenu-menu, contains the elements targeted by the menu selector passed into the jPanelMenu constructor function. The targeted menu element is cloned into #jPanelMenu-menu, and is not removed from its original position in the DOM, it is only hidden (using display: none).
The panel, .jPanelMenu-panel, contains all of the content in the <body> element (except for the elements specified by theexcludedPanelContent 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, the two <div> elements are removed, all of the content inside .jPanelMenu-panel is moved back into the <body> element, and the class of jPanelMenu is removed from the <html> tag.
Does It Animate?
Of course! (If you want it to, there’s an option 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
});