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

Дата публикации: 2017-03-06

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

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

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

<link href="css/okayNav.min.css" rel="stylesheet">
<script src="//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>

Logo

</a>

<ul>

<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();
});

$(function(){

var navigation = $('#nav-main').okayNav();

});

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

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

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

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

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

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

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

Метки: jquery