Топ плагинов jQuery. Плагин Pushmenu

Дата публикации: 2017-02-13

От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. Сегодня у нас еще один плагин для организации оригинального и современного меню, которое может стать украшением любого сайта. Это плагин Pushmenu.

Мы уже работали с похожим меню, используя при этом плагин Slidebars в одной из предыдущих статей. В этой же статье мы по сути даже не будем использовать плагин jQuery. По сути мы возьмем несколько строк кода jQuery, немного стилей CSS и получим примерно такое же решение: простое и красивое.

Исходники к статье Вы можете скачать по ссылке (сайт автора, к сожалению, недоступен). Итак, нам необходима некоторая верстка. Для начала сама выезжающая панель с меню, она выглядит следующим образом:

<nav class="pushmenu pushmenu-left">
 <ul class="links">
  <li> <a href="#">Home</a> </li>
  <li> <a href="#">About</a> </li>
  <li> <a href="#">Projects</a> </li>
  <li> <a href="#">Blog</a> </li>
  <li> <a href="#">Contacts</a> </li>
 </ul>
</nav>

<li> <a href="#">About</a> </li>

<li> <a href="#">Projects</a> </li>

<li> <a href="#">Contacts</a> </li>

</ul>

</nav>

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Теперь кнопочка, по которой будет выезжать с эффектом слайда наше меню:

<div class="menu">
 <div class="main">
  <section class="buttonset">
 <div id="nav_list">MENU</div>
  </section>
 </div>
</div>

</section>

</div>

Также для тэга body необходимо добавить класс pushmenu-push. Пока что все выглядит не очень интересно, мягко говоря.

Топ плагинов jQuery. Плагин Pushmenu

Однако давайте добавим предлагаемый в исходниках файл стилей. Скопируйте в свой проект всю папку css, кроме файла стилей там еще находится иконка меню. Подключим файл стилей:

<link href="css/style.css" rel="stylesheet">

1	<link href="css/style.css" rel="stylesheet">

Уже на порядок лучше.

Топ плагинов jQuery. Плагин Pushmenu

Меню скрыто, есть привычная иконка гамбургер для открытия выезжающей панели с меню. Чтобы заставить эту кнопку работать, нам достаточно несколько строк jQuery кода и, конечно же, подключения самой библиотеки jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
$(function() {
 $menuLeft = $('.pushmenu-left');
 $nav_list = $('#nav_list');

 $nav_list.click(function() {
  $(this).toggleClass('active');
  $('.pushmenu-push').toggleClass('pushmenu-push-toright');
  $menuLeft.toggleClass('pushmenu-open');
 });
});
</script>

$(function() {

$menuLeft = $('.pushmenu-left');

$nav_list = $('#nav_list');

$nav_list.click(function() {

$(this).toggleClass('active');

$('.pushmenu-push').toggleClass('pushmenu-push-toright');

$menuLeft.toggleClass('pushmenu-open');

});

</script>

Попробуем кликнуть по кнопке вызова меню.

Топ плагинов jQuery. Плагин Pushmenu

Работает! Эффект мне нравится. Уверен, вы найдете применение данному эффекту и добавите такое меню в свою копилку для реализации в будущих проектах. Ну а у меня на этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее