Создаем боковое меню с помощью плагина Sidr

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

Шаг 1. HTML

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

Код
<a id="simple-menu" href="#sidr">Открыть меню</a></pre>
<div id="sidr"><!-- ваш контент -->
<ul>
  <li><a href="#">Список 1</a></li>
  <li><a href="#">Список 2</a></li>
  <li><a href="#">Список 3</a></li>
</ul>
</div>
<pre>
<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>

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

[code]<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. Стили достаточно просты, вы можете в этом сами убедиться.

Вот и все. Готово!

  • FalleN

  • 2506

  • 1

  • 232

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!