Простой способ создания боковых меню с плагином 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>

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/ULdhTTGf3do/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Простой способ создания боковых меню с плагином Sidr | | 2013-04-20 05:54:51 | | Статьи Web-мастеру | | В этом уроке мы рассмотрим работу плагина Sidr, который предназначен для реализации боковых меню с тремя способами формирования собственного содержимого.НачалоПрежде всего, для использования плагина, | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: