Sidr - A jQuery plugin for creating side menus You will be able to create multiple sidrs on both sides of your web to make responsives menus (or not, it works perfectly on desktop too). It uses CSS3 transitions (and fallbacks to $.animate with older browsers) and it supports multiple source types. Get started Like any other plugin, you must include it after the jQuery script. You have to include a Sidr Theme stylesheet too, choose between the dark or the light one, or if you prefer create one by your own. Using bower or NPM Instead of downloading the plugin, you can install it with bower or with npm: bower install sidr --save From a CDN If you want to load the scripts from a CDN to save bandwith or improve the performance you can use jsDelivr. Demos & Usage Here are described differents ways of usage for this plugin, you can read and adapt them to your website’s requeriments. The Simplest Usage Create a div called sidr and place your menu there. <a id="simple-menu" href="#sidr">Toggle menu</a><div id="sidr"><! Open/Close Programatically Themes
jPanelMenu | A jQuery Plugin jakiestfu/Snap.js Sidebar | Semantic UI Multiple sidebars can be displayed at the same time only when using a supported animation like push or overlay. You may need to manually set the z-index on elements to ensure the intended sidebar element appears on top. If you are triggering multiple sidebars at the same time, its recommended to set the transition to overlay. // showing multiple $('.demo.sidebar') .sidebar('setting', 'transition', 'overlay') .sidebar('toggle') ; A sidebar can be initialized inside any element, not just a page's body. A sidebar's context cannot have any padding. For convenience calling attach events will allow you to bind events. $('.left.demo.sidebar').first() .sidebar('attach events', '.toggle.button') ; $('.toggle.button') .removeClass('disabled') ; Trigger Sidebar You can also specify what behavior should occur when the element is clicked $('.left.demo.sidebar').first() .sidebar('attach events', '.open.button', 'show') ; $('.open.button') .removeClass('disabled') ; Open Sidebar