От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов 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>
Теперь кнопочка, по которой будет выезжать с эффектом слайда наше меню:
<div class="menu"> <div class="main"> <section class="buttonset"> <div id="nav_list">MENU</div> </section> </div> </div>
Также для тэга body необходимо добавить класс pushmenu-push. Пока что все выглядит не очень интересно, мягко говоря.
Современные технологии веб-разработки
AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке
Однако давайте добавим предлагаемый в исходниках файл стилей. Скопируйте в свой проект всю папку css, кроме файла стилей там еще находится иконка меню. Подключим файл стилей:
<link href="css/style.css" rel="stylesheet">
Уже на порядок лучше.
Меню скрыто, есть привычная иконка гамбургер для открытия выезжающей панели с меню. Чтобы заставить эту кнопку работать, нам достаточно несколько строк jQuery кода и, конечно же, подключения самой библиотеки jQuery:
<script src="https://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>
Попробуем кликнуть по кнопке вызова меню.
Работает! Эффект мне нравится. Уверен, вы найдете применение данному эффекту и добавите такое меню в свою копилку для реализации в будущих проектах. Ну а у меня на этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!
