От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. Сегодня у нас еще один плагин для организации оригинального и современного меню, которое может стать украшением любого сайта. Это плагин Pushmenu.
Мы уже работали с похожим меню, используя при этом плагин Slidebars в одной из предыдущих статей. В этой же статье мы по сути даже не будем использовать плагин jQuery. По сути мы возьмем несколько строк кода jQuery, немного стилей CSS и получим примерно такое же решение: простое и красивое.
Исходники к статье Вы можете скачать по ссылке (сайт автора, к сожалению, недоступен). Итак, нам необходима некоторая верстка. Для начала сама выезжающая панель с меню, она выглядит следующим образом:
| 1 2 3 4 5 6 7 8 9 | <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> |
Как создать сайт самому?
Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!
ЗарегистрироватьсяТеперь кнопочка, по которой будет выезжать с эффектом слайда наше меню:
| 1 2 3 4 5 6 7 | <div class="menu"> <div class="main"> <section class="buttonset"> <div id="nav_list">MENU</div> </section> </div> </div> |
Также для тэга body необходимо добавить класс pushmenu-push. Пока что все выглядит не очень интересно, мягко говоря.
Однако давайте добавим предлагаемый в исходниках файл стилей. Скопируйте в свой проект всю папку css, кроме файла стилей там еще находится иконка меню. Подключим файл стилей:
| 1 | <link href="css/style.css" rel="stylesheet"> |
Уже на порядок лучше.
Меню скрыто, есть привычная иконка гамбургер для открытия выезжающей панели с меню. Чтобы заставить эту кнопку работать, нам достаточно несколько строк jQuery кода и, конечно же, подключения самой библиотеки jQuery:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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 вы можете узнать из наших уроков или курса. Удачи!
Как создать сайт самому?
Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!
Зарегистрироваться
