Топ плагинов jQuery. Плагин адаптивного меню okayNav

Топ плагинов jQuery. Плагин адаптивного меню okayNav

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

Итак, сегодня мы работаем с плагином jQuery, который позволяет создавать адаптивное горизонтальное меню. Обратимся к странице плагина okayNav на GitHub, перейдя по данной ссылке. Здесь мы можем скачать архив плагина и ознакомиться с документацией к нему. К слову, использовать плагин крайне просто и это безусловный плюс для создаваемого меню.

Подключаем файл стилей и скрипт jQuery адаптивного меню:

<link href="css/okayNav.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.okayNav-min.js"></script>

Теперь нам потребуется верстка меню. Она стандартна – обычный список элементов меню в теге nav:

<header id="header">
 <a class="site-logo" href="#">
  Logo
 </a>

 <nav role="navigation" id="nav-main" class="okayNav">
  <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Shop</a></li>
 <li><a href="#">Blog</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Contacts</a></li>
 <li><a href="#">About us</a></li>
 <li><a href="#">Testimonials</a></li>
  </ul>
 </nav>
</header>

Если заглянуть сейчас в браузер, то меню сейчас будет скрыто, и мы увидим лишь логотип. Чтобы меню заработало, нужно инициализировать его, вызвав одноименный метод плагина – okayNav().

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
$(function(){
 var navigation = $('#nav-main').okayNav();
});

Посмотрим на изменения в браузере.

Топ плагинов jQuery. Плагин адаптивного меню okayNav

Стандартное горизонтальное меню – ничего особенного. Но давайте попробуем уменьшить окно браузера.

Топ плагинов jQuery. Плагин адаптивного меню okayNav

Необычный эффект. Обычно при уменьшении окна браузера за иконкой меню скрываются все его элементы. Здесь же скрывается ровно столько, сколько необходимо. При клике по иконке меню скрытые пункты будут показаны с симпатичным анимационным эффектом.

Топ плагинов jQuery. Плагин адаптивного меню okayNav

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree