- Overview
- Documents
The best jQuery plugin for creating side menus and the easiest way for doing your menu responsive.
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).
Fill the sidrs normally, with existent content, remote content,... or what you want.
Get started
Like any other plugin, you must include it after the jQuery script. For a better performance load them at the bottom of your page or in an asynchronous way.
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.
Here are described differents ways of usage for this plugin, you can read and adapt them to your website's requeriments. Below are described all options with details.
Create a div called sidr and place your menu there. Then activate the plugin binding it to a link. By default, the menu wont't be visible and it will be displayed or hidden by clicking on the link.
You can create as many menus as you want in the same page, and you can place them at the right or left side. When creating more than one menu, you need to name them. As it is shown in the example, if you don't create the menu divcontainer, the plugin will create it for you.
There are four ways to load content in the menus, choose yours with the source option.
The major reason for creating this plugin was just being able to easily add existing content (like a menu, a search box, social icons,...) to a menu in small screens. Simply load existing html into a sidr, and then, hide this html and show the menu button with media queries.
There are some methods you can use to open or close menus as you want, or to bind them to any event. For example, in this page the right/left swipe touch event opens or closes the responsive menu (Note: this plugin doesn't implement touch events, in this case I'm using an external library).
Description: It creates a sidr menu and binds the toggle function to the selector.
jQuery(selector).sidr( [options] )
options (Object)
A map of options to pass to the method.
name (String) Default: 'sidr'
Name for the sidr.
speed (Number|String) Default: 200
A string or number determining how long the animation will run.
side (String) Default: 'left'
Left or right, the location for the sidebar.
source (String|Function) Default: null
A jQuery selector, an url or a callback function.
renaming (Boolean) Default: true
When filling the sidr with existing content, choose to rename or not the classes and ids.
body (String) Default: 'body' [ Version 1.1.0 an above ]
For doing the page movement the 'body' element is animated by default, you can select another element to animate with this option.
displace (Boolean) Default: true [ Version 1.2.0 an above ]
Displace the body content or not.
onOpen (function) Default: function() {} [ Version 1.2.0 an above ]
Callback that will be executed on open.
onClose (function) Default: function() {} [ Version 1.2.0 an above ]
Callback that will be executed on close.
Description: A generic sidr controller. Can be used to access the sidr methods open, close or toggle
jQuery.sidr( [method] [, name] [, complete] )
method (String) Default: 'toggle'
Choose between toggle, open or close.
name (String) Default: 'sidr'
Name of the target sidr.
complete (Function) Default: none
A function to call once the animation is complete.
There are two themes (two stylesheets) included with the plugin, a dark one and a light one. You can use them, create a new one or override them with your own styles.
<!DOCTYPE html>
<html>
<head>
<!-- Your stuff -->
<!-- Include Sidr bundled CSS theme -->
<link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
</head>
<body>
<!-- Your stuff -->
<!-- Include jQuery -->
<script src="javascripts/jquery.js"></script>
<!-- Include the Sidr JS -->
<script src="javascripts/sidr/jquery.sidr.min.js"></script>
</body>
</html>
Demos & Usage
The Simplest Usage
<a id="simple-menu" href="#sidr">Toggle menu</a>
<div id="sidr">
<!-- Your content -->
<ul>
<li><a href="#">List 1</a></li>
<li class="active"><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
<script>
$(document).ready(function() {
$('#simple-menu').sidr();
});
</script>
Create Multiple Menus
<a id="left-menu" href="#left-menu">Left Menu</a>
<a id="right-menu" href="#right-menu">Right Menu</a>
<script>
$(document).ready(function() {
$('#left-menu').sidr({
name: 'sidr-left',
side: 'left' // By default
});
$('#right-menu').sidr({
name: 'sidr-right',
side: 'right'
});
});
</script>
The Menu Content
<a id="existing-content-menu" href="#existing-content-menu">Existing content</a>
<a id="remote-content-menu" href="#remote-content-menu">Load remotelly</a>
<a id="callback-menu" href="#callback-menu">Callback loaded</a>
<header id="demoheader">
<h1>Demos & Usage</h1>
</header>
<div id="demo-content">
<p>Here are described differents ways of usage for this plugin, you can read and adapt them to your website's requeriments. Below are described all options with details.</p>
</div>
<script>
$(document).ready(function() {
$('#existing-content-menu').sidr({
name: 'sidr-existing-content',
source: '#demoheader, #demo-content'
});
$('#remote-content-menu').sidr({
name: 'sidr-remote-content',
source: 'http://www.example.com/remote-menu.html'
});
$('#callback-menu').sidr({
name: 'sidr-callback',
source: function(name) {
return '<h1>' + name + ' menu</h1><p>Yes! You can use a callback too ;)</p>';
}
});
});
</script>
Responsive Menus
<style>
#mobile-header {
display: none;
}
@media only screen and (max-width: 767px){
#mobile-header {
display: block;
}
}
</style>
<div id="mobile-header">
<a id="responsive-menu-button" href="#sidr-main">Menu</a>
</div>
<div id="navigation">
<nav class="nav">
<ul>
<li><a href="#download">Download</a></li>
<li><a href="#getstarted">Get started</a></li>
<li><a href="#usage">Demos & Usage</a></li>
<li><a href="#documentation">Documentation</a></li>
<li><a href="#themes">Themes</a></li>
<li><a href="#support">Support</a></li>
</ul>
</nav>
</div>
<script>
$('#responsive-menu-button').sidr({
name: 'sidr-main',
source: '#navigation'
});
</script>
Open/Close Programatically
<!-- For this example I include an external library to handle touch events -->
<script src="javascripts/jquery.touchwipe.js"></script>
<script>
$(window).touchwipe({
wipeLeft: function() {
// Close
$.sidr('close', 'sidr-main');
},
wipeRight: function() {
// Open
$.sidr('open', 'sidr-main');
},
preventDefaultEvents: false
});
</script>
Documentation
.sidr()
jQuery.sidr()
Themes