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

16 апреля 2013, 18:12

Новости

13/09/2024 Samsung Galaxy S23 Ultra - флагман с высокими амбициями

13/09/2024 Полиграфическое оборудование для офиса

03/09/2024 Полиграфическое оборудование для офиса

В этом уроке мы рассмотрим работу плагина 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>

Яндекс.Диск