От автора: приветствую вас, друзья. В данной статье мы с вами вернемся к теме меню и jQuery плагинам для работы с меню на ваших сайтах. Сегодня мы поговорим об оригинальном плагине jQuery меню, который позволит сделать jQuery полноэкранное меню на вашем сайте.
Итак, плагин jQuery меню, с которым мы сегодня поработаем, называется jQuery Fly Side Menu. Данный плагин буквально за пару минут позволит создать вам jQuery полноэкранное меню. При этом созданная полноэкранная навигация будет появляться с потрясающим анимационным jQuery 3D эффектом. Выглядит такое меню по-настоящему оригинально и эффектно.
Давайте скачаем и подключим необходимые для организации jQuery меню файлы.
|
1 2 3 |
<link href="css/fly_sidemenu.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.fly_sidemenu.js"></script> |
Теперь разметка меню и побольше контента, чтобы страница не выглядела пустой.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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 полноэкранного меню.
|
1 2 3 |
$(function(){ $(".sidemenu").fly_sidemenu(); }); |
Собственно, это все. Меню должно работать. Вот так оно выглядит вначале:
Ну а такой эффект мы видим после открытия меню:
Очень интересный jQuery 3d эффект для полноэкранного меню, согласитесь. Ну а у меня сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!
