20 jQuery плагинов полноэкранного меню

Jquery плагины и решения: 20 jQuery плагинов полноэкранного меню

Топиков с подборками различных реализаций меню на jQuery у нас в блоге набралось достаточное количество. Даже моя предпоследняя статья была посвящена фиксированным меню. Но сегодня я хотел бы сделать подборку относительно нового поколения навигации для сайта — полноэкранные меню. Они применяются в случаях, когда самой навигации и нет на странице, есть только одна кнопка, при нажатии на которую раскрывается меню. Похожий принцип можно увидеть в css-фреймворке Bootstrap, когда строка навигации перестает помещаться, блок со списком пунктов меню просто скрывается. На ее месте появляется кнопка с изображением, как правило, трех полосок. При нажатии выпадает полное меню. Во многих современных сайтах меню постоянно скрыто даже на больших экранах. Сделано это, чтобы не нагружать страницу. Хотя не стоит теперь на всех своих проектах делать так. Если меню носит второстепенное значение, можно и скрыть, но если же у вас большой сайт со сложной структурой, этот вариант лучше не использовать. Итак. С общим принципом работы разобрались, но данный тип меню довольно стандартен, хочется чего-то новенького. Не так давно я начал замечать сайты, у которых навигация не просто выпадает, а открывается полностью во весь экран в попап-окне. Что-то вроде популярных слайд-панелей, но все это дело занимает всю площадь рабочей области. За сайтами начали появляться и отдельные плагины и решения, о которых, собственно, этот топик.
Лично мне такая реализация меню навигации очень нравится, так как она удобная для пользователей с мобильными устройствами и очень эффектно выглядит на больших мониторах. Сайтов с полноэкранными меню появляется все больше, бесплатных jQuery плагинов также становится больше и концепция постепенно становится трендом.
Итак. К вашему вниманию 20 jQuery плагинов полноэкранного меню в popup окне.

Смотрите также:
20 слайд-панелей навигации для сайта
5 адаптивных меню для разных задач
6 jQuery плагинов для создания фиксированного меню

Full-Screen Pushing Navigation

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

Jquery плагины и решения: 20 jQuery плагинов полноэкранного меню


Rounded Animated Navigation

Еще один очень крутой jquery скрипт полноэкранной навигации от тех же разработчиков, что и плагин выше. Данный скрипт имеет очень классный и необычный эффект появления. При нажатии на кнопку меню, от иконки, с помощью css3, исходит волна через весь монитор, которая перерастает в фон пунктов меню. Такой же эффект скрытия.
Эта навигация отлично работает на мобильных устройствах, но учитывая, что эффект появления довольно тяжелый, думаю, на старых телефонах все будет тормозить (Я не проверял, так что буду рад, если вы напишите свой опыт в комментариях).

Jquery плагины и решения: 20 jQuery плагинов полноэкранного меню


Perspective Page View Navigation

Еще один эффектный скрипт полноэкранного меню. При нажатии на кнопку меню, видимая часть страницы отодвигается в сторону с эффектом 3D, на освободившемся пространстве появляется меню. Есть несколько эффектов анимации появления.
К сожалению, на мобильных телефона работает некорректно: если много пунктов меню, при этом они не помещаются в экран, то вертикальная прокрутка не появляется и навигация просто обрезается.

Jquery плагины и решения: 20 jQuery плагинов полноэкранного меню


Full Page Intro & Navigation

Довольно простой скрипт полноэкранного меню. Не могу сказать, что очень эффектный, но на мобильных устройствах будет удобным.

Jquery плагины и решения: 20 jQuery плагинов полноэкранного меню


Fullscreen Overlay Effects

Данная полноэкранная навигация имеет ряд различных эффектов появления фона, некоторые из которых очень неплохи.

Jquery плагины и решения: 20 jQuery плагинов полноэкранного меню


Fly Side Menu

Еще одно полноэкранное меню, при котором видимая часть с 3D эффектом отодвигается в сторону, но уже от других разработчиков. В отличии от предыдущего аналогичного скрипта, этот должен хорошо работать на мобильных устройствах, так как если меню не помещается в экран, появляется вертикальная прокрутка.

Jquery плагины и решения: 20 jQuery плагинов полноэкранного меню


Full-Screen Pop-Out Navigation

Простое, но элегантное полноэкранное меню, которое выпадает сверху, перекрывая всю рабочую область сайта.

Jquery плагины и решения: 20 jQuery плагинов полноэкранного меню


Closing Door Menu

Очень необычную концепцию имеет данная полноэкранная навигация. Если нажать на кнопку меню, с двух сторон начинают съезжаться две панели, в каждой из которых отдельное меню. В правом — текстовым списком. Слева — меню в виде анимированных иконок.

Jquery плагины и решения: 20 jQuery плагинов полноэкранного меню


Bouncy Navigation

Креативная полноэкранная навигация для сайта отличается от предыдущих появлением пунктов меню. Каждый пункт включает в себя иконку и текст. Эффект появления заключается в следующем: иконки хаотично выпрыгивают снизу экрана и становятся в два ряда.

Jquery плагины и решения: 20 jQuery плагинов полноэкранного меню


Fullscreen fading navigation

Jquery плагины и решения: 20 jQuery плагинов полноэкранного меню


Square Menu

Отличный скрипт меню с оригинальным эффектом появления.

Jquery плагины и решения: 20 jQuery плагинов полноэкранного меню


Fullscreen perspective menu

Jquery плагины и решения: 20 jQuery плагинов полноэкранного меню




Fullscreen overlay menu

Jquery плагины и решения: 20 jQuery плагинов полноэкранного меню


Полноэкранная навигация с фоновой картинкой

Jquery плагины и решения: 20 jQuery плагинов полноэкранного меню


Адаптивное полноэкранное меню

Jquery плагины и решения: 20 jQuery плагинов полноэкранного меню


jQuery плагин адаптивной полноэкранной навигации

Jquery плагины и решения: 20 jQuery плагинов полноэкранного меню


Flexible Fullscreen Navigation Menu

Jquery плагины и решения: 20 jQuery плагинов полноэкранного меню


Адаптивное полноэкранное Overlay меню

Jquery плагины и решения: 20 jQuery плагинов полноэкранного меню


Напишите свой комментарий
comments powered by HyperComments