Боковое меню с помощью плагина Sidr

jQuery 21.04.2013

На некоторых сайтах можно встретить боковые меню, принцип его реализации можно найти в мобильной версии вконтакте и популярно сайта 3dnews. Это весьма удобно, ведь даже на моей мобильной версии IE это смотрится достаточно привлекательно, благодаря плавной анимации и простоте решения. В данном уроке мы рассмотрим как можно создать такое боковое меню. Мы рассмотрим несколько типов бокового меню: меню слева, права и добавим вариант просмотра с контентом, что позволит выводить страницу подобно фреймам.

ДЕМО

ИСХОДНИКИ

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

Шаг 1. HTML

У нас будет несколько вариантов построения разметки, кроме этого нам необходимо привязать к ним некоторые функции js, к примеру для необходимости загрузки стороннего файла или для функции обратного вызова, начнем с самого простого примера. Для его реализации нам необходима простая разметка, а затем инициализировать все это с плагином:

<a id="simple-menu" href="#sidr">Открыть меню</a>
<div id="sidr"><!-- ваш контент -->
<ul>
	<li><a href="#">Список 1</a></li>
	<li><a href="#">Список 2</a></li>
	<li><a href="#">Список 3</a></li>
</ul>
</div>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
 $('#simple-menu').sidr();
});
// ]]></script>

Далее мы рассмотрим пример реализации нескольких меню, то есть на одной странице можно будет открыть боковое меню справа, а затем открыть его слева, для этого нам понадобятся параметры name и side:

<a id="left-menu" href="#left-menu">Меню слева</a>
<a id="right-menu" href="#right-menu">Меню справа</a>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
   $('#left-menu').sidr({
     name: 'sidr-left',
     side: 'left' // значение по умолчанию
   });
   $('#right-menu').sidr({
     name: 'sidr-right',
     side: 'right'
   });
});
// ]]></script>

Последним мы рассмотрим вариант функции обратного вызова и возможности загрузки в боковое меню файла с содержанием:

<a class="basic" id="remote-content-menu" href="#remote-content-menu">Загрузить контент из файла</a>
 <a class="basic" id="callback-menu" href="#callback-menu">Функция обратного вызова</a>

<script type="text/javascript">// <![CDATA[
 $(document).ready(function() {
 $('#existing-content-menu').sidr({
 name: 'sidr-existing-content',
 source: '#demoheader, #demo-content'
 });
 $('#remote-content-menu').sidr({
 name: 'sidr-remote-content',
 source: 'content.html'
 });
 $('#callback-menu').sidr({
 name: 'callback',
 source: function(name) {
 return '

<h1>Меню ' + name + '</h1>

Все работает отлично!

';
 }
 });
 });
// ]]></script>

Шаг 2. CSS

Автор данного плагина предусмотрел для демонстрации два стиля - светлый и темный, их, соответственно можно просмотреть в исходниках в файлах jquery.sidr.light.css и jquery.sidr.dark.css. Стили достаточно просты, вы можете в этом сами убедиться.