Back to post

Sidr is a responsive jQuery plugin for side menus. You can create multiple side menus on both sides of the website for responsive or desktop menus. The transitions are based on CSS3 so it works smoothly on all types of modern browsers.

Features:

Install with NPM

$ npm install sidr --save

Install with Bower

$ bower install sidr --save

How to use it:

1. Include the Javascript jquery.sidr.min.js at the bottom of the web page.

<script src="path/to/jquery.sidr.min.js"></script>

2. Include the CSS sidr.dark.min.css in the header of the page. There are three predefined themes and you can use one of them accordingly through CSS.

Dark - sidr.dark.min.css

Bare - sidr.bare.min.css

Light - sidr.light.min.css 

<link rel="stylesheet" href="path/to/sidr.dark.min.css">

OR

<link rel="stylesheet" href="path/to/sidr.bare.min.css">

OR

<link rel="stylesheet" href="path/to/sidr.light.min.css">

3. Add the basic HTML to the page.

<a id="simple-menu" href="#sidr">Toggle menu</a>
<div id="sidr">
  <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>

4. Initialize the plugin and we're ready to go. 

$(document).ready(function() {
  $('#simple-menu').sidr();
});

Plugin's default options:

Name Default Type Description
name sidr String Name for the sidr.
side left String Left or right, the location for the sidebar.
source null String|Function A jQuery selector, an url or a callback function.
renaming true Boolean When filling the sidr with existing content, choose to rename or not the classes and ids.
body body String For displacing the page the 'body' element is animated by default, you can select another element to animate with this option.
displace true Boolean Displace the body content or not.
timing ease String Timing function for CSS transitions.
method toggle String The action to execute when clicking the button. 'toggle', 'open' and 'close' are allowed.
bind touchstart click String The event(s) to trigger the menu. Only 1 event will be triggered each 100ms, so only the first one will be triggered if there are 2 at the same time.
onOpen function() {} function Callback that will be executed when the menu starts opening.
onOpenEnd function() {} function Callback that will be executed when the menu ends opening.
onClose function() {} function Callback that will be executed when the menu starts closing.
onCloseEnd function() {} function Callback that will be executed when the menu ends closing.

Default example

HTML structure

<a id="simple-menu" href="#sidr">Toggle menu</a>
<div id="sidr">
  <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();
});

Right Menu

HTML structure

<a id="right-menu" href="#sidr-right">Right Menu</a>
<div id="sidr-right">
  <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() {
  $('#right-menu').sidr({
    name: 'sidr-right',
    side: 'right'
  });
});

Existing Content Menu

Demos & Usage

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.

HTML structure

<a id="existing-content-menu" href="#existing-content-menu">Existing content</a>
<header id="demoheader">
  <h2>DEMOS & USAGE</h2>
</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'
  });
});

Load remotelly

HTML structure

<a id="remote-content-menu" href="#remote-content-menu">Load remotelly</a>

Script

$(document).ready(function() {
  $('#remote-content-menu').sidr({
    name: 'sidr-remote-content',
    source: 'menu.php'
    // OR
    // source: 'http://www.example.com/remote-menu.html'
  });
});

Callback loaded menu

HTML structure

<a id="callback-menu" href="#callback-menu">Callback loaded</a>

Script

$(document).ready(function() {
  $('#callback-menu').sidr({
    name: 'sidr-callback',
    source: function(name) {
      return '<h2>' + name + ' menu</h2><p>Yes! You can use a callback too ;)</p>';
    }
  });
});

For Mobile only

* It will only work below 768px.

HTML structure

<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 &amp; 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

$(document).ready(function() {
  $('#responsive-menu-button').sidr({
    name: 'sidr-main',
    source: '#navigation'
  });
});

CSS

#mobile-header, #navigation {
  display: none;
}
@media only screen and (max-width: 767px){
  #mobile-header {
    display: block;
  }
}