Responsive jQuery Plugin For Side Menus – Sidr

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:

• It can be installed with NPM and Bower.
• Smooth CSS3 transitions.
• Supports on all major browsers.
• Can be used for desktop or responsive menus.
• Supports remote content.

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: