Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Липкое многоуровневое мобильное меню - jQuery BurgerMenu

Дата добавления: 24.09.2019 - 06:29
Добавил: Buger
Количество просмотров: 48
Количество комментариев: 0
Размер файла: 22.4 Kb
Рейтинг материала: 5.0 / 1
Липкое многоуровневое мобильное меню - jQuery BurgerMenu
рейтинг 5.0
/
голосов 1
Плагин мобильного меню, который помогает разработчикам создавать push-меню вне холста со скользящими и/или выпадающими подменю.


Возможности:
  • Плавные переходы CSS3.
  • Пользовательский элемент переключения.
  • Расположение меню слева и справа.
  • Липкий заголовок.
  • Семантическая разметка и SEO-дружественный.
  • Легкое и простое в реализации.


Как использовать:

1. Создайте заголовок, содержащий кнопку переключения меню.
Код
<div class="burgermenu-sticky-head">
  <a id="burgermenu-toggle" href="#example">
  Toggle Menu
  </a>
</div>


2. Создайте вложенный список навигации для меню вне холста.
.burgermenu-left: положение меню вне холста: ".burgermenu-left" или ".burgermenu-right".
.dropdown: есть выпадающие подменю
.has-children: имеет скользящие подменю
Код
<nav id="example" class="burgermenu-left">
  <ul class="burgermenu-panel">
  <li><a href="#">Home</a></li>
  <li class="dropdown">
  <a href="#">Element with dropdown children</a>
  <ul class="dropdown-children">
  <li class="has-children">
  <a href="#">Element with panel children</a>
  <ul class="is-children">
  <li><a href="#" class="back">Back</a></li>
  <li><a href="#">Lorem ipsum dolor sit amet</a></li>
  <li><a href="#">Consectetur adipisicing elit</a></li>
  <li><a href="#">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</a></li>
  <li><a href="#">Ut enim ad minim veniam</a></li>
  </ul><!-- .is-children -->
  </li><!-- .has-children -->

  <li class="has-children">
  <a href="#">Other element with panel</a>
  <ul class="is-children">
  <li><a href="#" class="back">Back</a></li>
  <li><a href="#">Lorem ipsum dolor sit amet</a></li>
  <li><a href="#">Consectetur adipisicing elit</a></li>
  <li><a href="#">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</a></li>
  <li><a href="#">Ut enim ad minim veniam</a></li>
  </ul><!-- .is-children -->
  </li><!-- .has-children -->
  </ul>
  </li><!-- .dropdown -->
  </ul>
</nav>


3. Подключите файлы плагина Burgermenu в документ. Не забывайте, что у вас должена быть подключена библиотека jQuery.
Код
<link rel="stylesheet" href="/dist/burgermenu.css">
<link rel="stylesheet" href="/dist/themes/default.css">
<script src="/dist/burgermenu.js"></script>


4. Инициализируйте плагин Burgermenu, и все готово.
Код
$(function() {
  $('#example').burgermenu();
});


5. Установите положение меню. По умолчанию: "слева".
Код
$('#example').burgermenu({
  position: 'right' //положение меню  
});


6. Селекторы по умолчанию.
Код
$('#example').burgermenu({
  toggle_selector: '#burgermenu-toggle',
  parent_selector: '.has-children',
  children_selector: '.is-children',
  dropdown_selector: '.dropdown',
  back_selector: '.back'
});


7. Создайте свой собственный стиль в файле default.css (как вы хотите чтобы выглядело меню).
Код
.burgermenu-left,
.burgermenu-right {
  font-size: 14px;
  line-height: 1.35;
}

.burgermenu-left a,
.burgermenu-right a {
  text-decoration: none;
  padding: 15px 25px 15px 10px;
  color: #666;
}
/* ... и так далее */
Добавлять комментарии могут только зарегистрированные пользователи.


Поделись с друзьями: