20 jQuery плагинов полноэкранного меню
Топиков с подборками различных реализаций меню на jQuery у нас в блоге набралось достаточное количество. Даже моя предпоследняя статья была посвящена фиксированным меню. Но сегодня я хотел бы сделать подборку относительно нового поколения навигации для сайта — полноэкранные меню. Они применяются в случаях, когда самой навигации и нет на странице, есть только одна кнопка, при нажатии на которую раскрывается меню. Похожий принцип можно увидеть в css-фреймворке Bootstrap, когда строка навигации перестает помещаться, блок со списком пунктов меню просто скрывается. На ее месте появляется кнопка с изображением, как правило, трех полосок. При нажатии выпадает полное меню. Во многих современных сайтах меню постоянно скрыто даже на больших экранах. Сделано это, чтобы не нагружать страницу. Хотя не стоит теперь на всех своих проектах делать так. Если меню носит второстепенное значение, можно и скрыть, но если же у вас большой сайт со сложной структурой, этот вариант лучше не использовать. Итак. С общим принципом работы разобрались, но данный тип меню довольно стандартен, хочется чего-то новенького. Не так давно я начал замечать сайты, у которых навигация не просто выпадает, а открывается полностью во весь экран в попап-окне. Что-то вроде популярных слайд-панелей, но все это дело занимает всю площадь рабочей области. За сайтами начали появляться и отдельные jQuery плагины и css3 решения, о которых, собственно, этот топик.
Лично мне такая реализация меню навигации очень нравится, так как она удобная для пользователей с мобильными устройствами и очень эффектно выглядит на больших мониторах. Сайтов с полноэкранными меню появляется все больше, бесплатных jQuery плагинов также становится больше и концепция постепенно становится трендом.
Итак. К вашему вниманию 20 jQuery плагинов полноэкранного меню в popup окне.
Смотрите также:
20 слайд-панелей навигации для сайта
5 адаптивных меню для разных задач
6 jQuery плагинов для создания фиксированного меню
7 jQuery плагинов меню для Bootstrap
Full-Screen Pushing Navigation
Один из лучших, на сегодняшний день, бесплатный скрипт полноэкранной навигации. При нажатии на кнопку «Меню» появляется навигация, плюс предусмотрен блок с контактами, это очень удобно для посетителя сайта, так как путь до звонка становится на 1 клик меньше. Хочу заметить, что скрипт адаптивный и на мобильных устройствах блок с контактами становится под навигацией.Очень приятным дополнением к дизайну окна является анимированная SVG иконка. По умолчанию она имеет вид трех полосок, но при нажатии иконка трансформируется в стрелку, которая показывает, что меню можно скрыть.
Rounded Animated Navigation
Еще один очень крутой jquery скрипт полноэкранной навигации от тех же разработчиков, что и плагин выше. Данный скрипт имеет очень классный и необычный эффект появления. При нажатии на кнопку меню, от иконки, с помощью css3, исходит волна через весь монитор, которая перерастает в фон пунктов меню. Такой же эффект скрытия.Эта навигация отлично работает на мобильных устройствах, но учитывая, что эффект появления довольно тяжелый, думаю, на старых телефонах все будет тормозить (Я не проверял, так что буду рад, если вы напишите свой опыт в комментариях).
Perspective Page View Navigation
Еще один эффектный скрипт полноэкранного меню. При нажатии на кнопку меню, видимая часть страницы отодвигается в сторону с эффектом 3D, на освободившемся пространстве появляется меню. Есть несколько эффектов анимации появления.К сожалению, на мобильных телефона работает некорректно: если много пунктов меню, при этом они не помещаются в экран, то вертикальная прокрутка не появляется и навигация просто обрезается.
Full Page Intro & Navigation
Довольно простой скрипт полноэкранного меню. Не могу сказать, что очень эффектный, но на мобильных устройствах будет удобным.
Fullscreen Overlay Effects
Данная полноэкранная навигация имеет ряд различных эффектов появления фона, некоторые из которых очень неплохи.
Fly Side Menu
Еще одно полноэкранное меню, при котором видимая часть с 3D эффектом отодвигается в сторону, но уже от других разработчиков. В отличии от предыдущего аналогичного скрипта, этот должен хорошо работать на мобильных устройствах, так как если меню не помещается в экран, появляется вертикальная прокрутка.
Full-Screen Pop-Out Navigation
Простое, но элегантное полноэкранное меню, которое выпадает сверху, перекрывая всю рабочую область сайта.
Closing Door Menu
Очень необычную концепцию имеет данная полноэкранная навигация. Если нажать на кнопку меню, с двух сторон начинают съезжаться две панели, в каждой из которых отдельное меню. В правом — текстовым списком. Слева — меню в виде анимированных иконок.
Bouncy Navigation
Креативная полноэкранная навигация для сайта отличается от предыдущих появлением пунктов меню. Каждый пункт включает в себя иконку и текст. Эффект появления заключается в следующем: иконки хаотично выпрыгивают снизу экрана и становятся в два ряда.
