Сегодня мы все уже привыкли, и даже полюбили, пользоваться так называемым боковыми меню, которые корректнее было бы назвать скрытыми меню. Они стали довольно популярными вместе с ростом числа смартфонов и других мобильных устройств, позволяющими выходить в интернет. Становится довольно сложно найти приложение для смартфона, которое не было бы оборудовано боковым меню, которое не выезжает сбоку или не включается при нажатии специальной кнопки. Если нам не изменяет память, впервые такая технология была введена в приложение Facebook. Сегодняшний конкурсант, Sidr, способен предоставить вам даже больше.
Sidr для jQuery: очень гибкое навигационное решение для мобильных устройств
Говоря техническим языком, off-canvas навигация представляет собой меню, которое расположено за пределами окна просмотра, и становится видимым только тогда, когда нужно. Мы могли делать примерно то же самое во времена старого доброго DHTML.Если вам нужен более расширенный функционал, вам нужно будет сделать некоторые усилия. Чтобы уберечь нас от постоянной разработки подобного функционала с нуля, Alberto Varela Sanchez решил принять эту задачу на себя, и создал Sidr. 
Sidr, попросту говоря, это самое гибкое решение для организации боковой навигации, с которым нам приходилось сталкиваться. На удивление плагин не осложнен даже процессом встраивания его на сайт. Нам просто нужно встроить скрипт и сопутствующие таблицы стилей в головную секцию документа: А тело документа нужно оборудовать следующим:
Самый простой вариант применения бокового меню заключается в использовании DIV с id sidr. DIV содержит в себе контент меню, а ссылка открывает его:
Toggle menu
$(document).ready(function() {
$( '#simple-menu' ).sidr();
});
Многим понравится даже стандартный функционал, но Sidr способен на большее. Прежде всего, у вас есть возможность создавать столько боковых панелей на одной странице, сколько вам нужно. Вам нужно будет задавать для них имена, чтобы иметь возможность применять функции к каждой боковой панели индивидуально.Контент меню можно вызывать различными способами. Самый прямой способ заключается в использовании DIV с контентом, о котором мы уже рассказывали. Также есть возможность встроить уже существующий HTML-код с локального или удаленного хранилища. Самый сложный способ подразумевает использование функционала с обратными вызовами.Нас действительно впечатлила возможность превратить практически любое меню в адаптивное при помощи Sidr. Sanchez прямо демонстрирует эту возможность на демо-странице проекта. Эта страница изначально оборудована горизонтальным верхнем меню навигации. Когда вы изменяете размер окна браузера, Sidr вступает в действие, и адаптирует меню под текущие размеры окна. После этого, верхнее меню может быть преобразовано в боковое меню, а то и вовсе быть скрытым за пределами окна просмотра. Тогда пользователям отображается кнопка меню, посредством которой они могут включать и выключать меню. Для мобильных пользователей также активируется возможность отображения меню посредством перетаскивания. 
Sidr основан на шаблонах, и изначально представлен в темной и светлой цветовых вариациях. Используя каскадные таблицы стилей, вы можете настраивать дизайн по собственному усмотрению.По нашему мнению, Sidr – это лучшее доступное решение для создания подобного типа меню. Мы рекомендуем вам использовать этот плагин, когда вам потребуется подобный функционал, либо адаптивные меню навигации. Плагин бесплатен, и вы можете использовать его как в личных, так и в коммерческих проектах. Он распространяется под лицензионным соглашением MIT.
Исходники в архиве.