3DM-студия
» » » Простой способ создания боковых меню с плагином Sidr

Простой способ создания боковых меню с плагином Sidr

Простой способ создания боковых меню с плагином Sidr


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

Начало
Прежде всего, для использования плагина, необходимо подключить js и css файлы библиотеки. Авторы плагина предоставляют как светлое (jquery.sidr.light.css), так и тёмное (jquery.sidr.dark.css) оформление.

<!DOCTYPE html>
<html>
 <head>
   <!-- ваш код-->

   <!-- подгружаем таблицу стилей -->
   <link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
 </head>
 <body>
   <!-- ваш код -->

   <!-- подгружаем jQuery -->
   <script src="javascripts/jquery.js"></script>
   <!-- подгружаем Sidr JS -->
   <script src="javascripts/sidr/jquery.sidr.min.js"></script>
 </body>
</html>


Примеры использования

Простой пример
Для того чтобы применить плагин, нам сначала необходимо создать html блок, представляющий из себя меню, а затем в js коде подключить его к sidr():

<a id="simple-menu" href="#sidr">Toogle 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() {
 $('#simple-menu').sidr();
});
</script>

Создание нескольких меню
Если вам необходимо создать несколько меню на одной странице, одно из которых будет открываться справа, другое - слева, то при подключении sidr воспользуйтесь параметрами name и side:

<a id="left-menu" href="#left-menu">Left Menu</a>
<a id="right-menu" href="#right-menu">Right Menu</a>
<script>
$(document).ready(function() {
   $('#left-menu').sidr({
     name: 'sidr-left',
     side: 'left' // по умолчанию
   });
   $('#right-menu').sidr({
     name: 'sidr-right',
     side: 'right'
   });
});
</script>

Содержание меню

Sidr поддерживает несколько способов формирования контента, отображаемого в меню: может взять с самой страницы, с отдельного файла или получить через функцию обратного вызова:

<a id="existing-content-menu" href="#existing-content-menu">Existing content</a>
<a id="remote-content-menu" href="#remote-content-menu">Load remotelly</a>
<a id="callback-menu" href="#callback-menu">Callback loaded</a>

<header id="demoheader">
   <h1>Demos & Usage</h1>
</header>

<div id="demo-content">
   <p>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.</p>
</div>

<script>
$(document).ready(function() {
   $('#existing-content-menu').sidr({
     name: 'sidr-existing-content',
     source: '#demoheader, #demo-content'
   });
   $('#remote-content-menu').sidr({
     name: 'sidr-remote-content',
     source: 'http://www.example.com/remote-menu.html'
   });
   $('#callback-menu').sidr({
     name: 'sidr-callback',
     source: function(name) {
       return '<h1>' + name + ' menu</h1><p>Yes! You can use a callback too ;)</p>';
     }
   });
});
</script>



Скачивание доступно только для зарегистрированных
НАШИ НОВОСТИ
Опубликовано 04 апрель 2014
Представляю вашему вниманию шаблон онлайн кинотеатра с глубокой настройкой под свои нужны OST-ARENA.RU Читать далее...
Опубликовано 18 март 2014
Представляю вашему вниманию, адаптивный новостной шаблон Reades News. Адаптивный дизайн подразумевает, что шаблон будет одинаково корректно отображаться во всех устройствах. Шаблон отлично подойдет для медийных новостей и не только. Обязательно посмотрите видеозапись работы Читать далее...
Опубликовано 16 март 2014
Дизайн Zerotheme, адаптирован для DLE 10.1 by Yurets. Шаблон zBoomMusic позиционируется как шаблон для музыкального портала или музыкального блога. Вверху шаблона расположен слайдер, под слайдером Топ новостей, далее последние добавленные новости. Читать далее...