—»     —»   Sidr для jQuery: современная навигационная боковая панель с Edge
  Раздел: Меню и Навигация   Нет комментариев  

Sidr для jQuery: современная навигационная боковая панель с Edge



Сегодня мы все уже привыкли, и даже полюбили, пользоваться так называемым боковыми меню, которые корректнее было бы назвать скрытыми меню. Они стали довольно популярными вместе с ростом числа смартфонов и других мобильных устройств, позволяющими выходить в интернет. Становится довольно сложно найти приложение для смартфона, которое не было бы оборудовано боковым меню, которое не выезжает сбоку или не включается при нажатии специальной кнопки. Если нам не изменяет память, впервые такая технология была введена в приложение Facebook. Сегодняшний конкурсант, Sidr, способен предоставить вам даже больше.

Sidr для jQuery: современная навигационная боковая панель с Edge

Sidr для jQuery: очень гибкое навигационное решение для мобильных устройств

Говоря техническим языком, off-canvas навигация представляет собой меню, которое расположено за пределами окна просмотра, и становится видимым только тогда, когда нужно. Мы могли делать примерно то же самое во времена старого доброго DHTML.

Если вам нужен более расширенный функционал, вам нужно будет сделать некоторые усилия. Чтобы уберечь нас от постоянной разработки подобного функционала с нуля, Alberto Varela Sanchez решил принять эту задачу на себя, и создал Sidr.

Sidr для jQuery: современная навигационная боковая панель с Edge

Sidr, попросту говоря, это самое гибкое решение для организации боковой навигации, с которым нам приходилось сталкиваться. На удивление плагин не осложнен даже процессом встраивания его на сайт. Нам просто нужно встроить скрипт и сопутствующие таблицы стилей в головную секцию документа:

<link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css"/>

А тело документа нужно оборудовать следующим:

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

Самый простой вариант применения бокового меню заключается в использовании DIV с id sidr. DIV содержит в себе контент меню, а ссылка открывает его:

<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() {
$( &#039;#simple-menu&#039; ).sidr();
});
</script>

Многим понравится даже стандартный функционал, но Sidr способен на большее. Прежде всего, у вас есть возможность создавать столько боковых панелей на одной странице, сколько вам нужно. Вам нужно будет задавать для них имена, чтобы иметь возможность применять функции к каждой боковой панели индивидуально.

Контент меню можно вызывать различными способами. Самый прямой способ заключается в использовании DIV с контентом, о котором мы уже рассказывали. Также есть возможность встроить уже существующий HTML-код с локального или удаленного хранилища. Самый сложный способ подразумевает использование функционала с обратными вызовами.

Нас действительно впечатлила возможность превратить практически любое меню в адаптивное при помощи Sidr. Sanchez прямо демонстрирует эту возможность на демо-странице проекта. Эта страница изначально оборудована горизонтальным верхнем меню навигации. Когда вы изменяете размер окна браузера, Sidr вступает в действие, и адаптирует меню под текущие размеры окна. После этого, верхнее меню может быть преобразовано в боковое меню, а то и вовсе быть скрытым за пределами окна просмотра. Тогда пользователям отображается кнопка меню, посредством которой они могут включать и выключать меню. Для мобильных пользователей также активируется возможность отображения меню посредством перетаскивания.

Sidr для jQuery: современная навигационная боковая панель с Edge

Sidr основан на шаблонах, и изначально представлен в темной и светлой цветовых вариациях. Используя каскадные таблицы стилей, вы можете настраивать дизайн по собственному усмотрению.

По нашему мнению, Sidr – это лучшее доступное решение для создания подобного типа меню. Мы рекомендуем вам использовать этот плагин, когда вам потребуется подобный функционал, либо адаптивные меню навигации. Плагин бесплатен, и вы можете использовать его как в личных, так и в коммерческих проектах. Он распространяется под лицензионным соглашением MIT.

Ссылки

* Демонстрационная страница Sidr – лучшего jQuery-плагина для реализации скользящих меню навигации
* Sidr на GitHub| artberri / sidr
* Страница разработчика | Alberto Varela Sanchez
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 15309   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


фотосессия со змеей
fotores.ru
Хранения вещей
Покупаем неликвид! Выгодно приобретем с хранения. Любые объемы
globalsklad.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930