Sidr – best jQuery side menus

The best jQuery plugin for creating side menus and the easiest way for doing your menu responsive

Sidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive. For a further description, documentation and others visit: http://www.berriart.com/sidr

 

jQuery plugin for creating side menus

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.

<!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>

 

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.

The Simplest Usage

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.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

<a id="simple-menu" href="#sidr">Toogle menu</a>

<div id="sidr">
  <!-- Your content -->
  <ul>
    <li><a href="#">List 1</a></li>
    <li><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 (Left Menu / Right Menu )

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 div container, the plugin will create it for you.

<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

There are four ways to load content in the menus, choose yours with the source option.

  • We have shown the first way at the ‘Simplest Usage’ demo, no more than placing the content into the div menu.
  • The most common way is to load existing html into the menu, you can add as many selectors as you want and they will be loaded in order.
  • There is the possibility to load remote content easily via AJAX.
  • If you need a more complex way to load content into the menu you can just create a callback function.
<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 &amp; 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

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.

<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 &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>
    $('#responsive-menu-button').sidr({
      name: 'sidr-main',
      source: '#navigation'
    });
</script>

 

Open/Close Programatically

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).

<!-- 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>

 

Themes

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.

Dark theme

 jQuery plugin for creating side menus

 

Light theme

 jQuery plugin for creating side menus

 

DOWNLOAD SIDR | SIDR DEMO


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *