Menu
Fork me on GitHub

Sidr

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

(Yes, I like the way Facebook implements its menu on mobile)

By Alberto Varela

Download

Screenshots

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.

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.

The Simplest Usage Simple menu

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.

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.

The Menu Content Existing content Load remotelly Callback loaded

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.

Responsive Menus Responsive Menu

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.

Open/Close Programatically Swipe example

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

Documentation

.sidr()

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.

jQuery.sidr()

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.

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.

Development

If you've created a website or an application using this plugin and you want to show it in a future showcase section, send me an email with the url to alberto[at]berriart[dot]com.

Pull requests are very welcome! Make sure your patches are well tested. Please create a topic branch for every separate change you make.

Resize your window to see how the main menu of this page is hiddened, and how it is converted to a sidr that you can expand with a button that is at the top of the page (or open it directly in your phone).

×

You need to open this page on your mobile, or on a touch device to test this. Once opened, swipe right or left to open or close the menu.

×
Dark Theme ×
Light Theme ×