31
Мар
2017

Топ плагинов jQuery. Плагин полноэкранного jQuery меню

Топ плагинов jQuery. Плагин полноэкранного jQuery меню

От автора: приветствую вас, друзья. В данной статье мы с вами вернемся к теме меню и jQuery плагинам для работы с меню на ваших сайтах. Сегодня мы поговорим об оригинальном плагине jQuery меню, который позволит сделать jQuery полноэкранное меню на вашем сайте.

Итак, плагин jQuery меню, с которым мы сегодня поработаем, называется jQuery Fly Side Menu. Данный плагин буквально за пару минут позволит создать вам jQuery полноэкранное меню. При этом созданная полноэкранная навигация будет появляться с потрясающим анимационным jQuery 3D эффектом. Выглядит такое меню по-настоящему оригинально и эффектно.

Давайте скачаем и подключим необходимые для организации jQuery меню файлы.

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

Теперь разметка меню и побольше контента, чтобы страница не выглядела пустой.

<ul class="sidemenu">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Catalog</a></li>
	<li><a href="#">Partners</a></li>
	<li><a href="#">Contacts</a></li>
</ul>
<div class="container">
	<div class="row">
		<div class="col-md-12">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, natus doloribus inventore iste modi eum saepe, ipsam veniam alias aliquam impedit rerum quae, nostrum laboriosam eligendi mollitia eos. Aut, deleniti.</p>
		</div>
	</div>
</div>

Напоследок нам остается лишь обратиться к методу fly_sidemenu() используемого плагина jQuery полноэкранного меню.

$(function(){
	$(".sidemenu").fly_sidemenu();
});

Собственно, это все. Меню должно работать. Вот так оно выглядит вначале:

Топ плагинов jQuery. Плагин полноэкранного jQuery меню

Ну а такой эффект мы видим после открытия меню:

Топ плагинов jQuery. Плагин полноэкранного jQuery меню

Очень интересный jQuery 3d эффект для полноэкранного меню, согласитесь. Ну а у меня сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!

Share

Тебе может это понравится...