20 слайд-панелей навигации для сайта

jQuery плагины и JavaScript решения: Jquery плагины и решения: 20 слайд-панелей навигации для сайта

Сейчас наблюдается интересная тенденция в веб-дизайне. Чем меньше элементов на странице — тем лучше. Но это не значит, что их не должно быть вообще. Большинство блоков, таких как меню навигации по сайту, меню профиля пользователя и т. д. можно скрыть и появляться они будут при нажатии и наведении. Некоторые могут сказать, что от этого страдает юзабилити страницы. Не думаю, так как страница стает чище, а значит легче ориентироваться. Человек не путается в горе ссылок.
Сегодня я подготовил коллекцию слайд-панелей, которые по умолчанию на странице скрыты. Чтоб вызвать меню, требуется нажать или навести мышкой на соответствующую иконку. Этот прием пришел в веб-дизайн из мобильных приложений, где нельзя разметить много элементов на одном экране. Со временем такие панели перекочевали и в веб-сайты. Данная коллекция пригодятся, в первую очередь, разработчиками мобильных, адаптивных сайтов. При маленьком разрешении экрана будет появляться именно такая выезжающая навигация, а на нормальных, больших мониторах можно сделать обычное меню, к которому все привыкли. Таким образом человек с мобильным устройством не запутается в вашем сайте, так как он давным давно привык к использованию слайд-панелей, ведь все приложения в его смартфоне работают по такому же принципу.
Хочу заметить, что в данную коллекцию вошли плагины, которые заточены только под мобильные сайты и на широких мониторах их использование будет неуместно. Хотя присутствуют и универсальные панели, которые подойдут для любого веб-сайта. Смотрите демо и выбирайте, что подойдет под ваши задачи.
Выпадающие панели работают на jquery. Внедрить в свой сайт такое меню не составит особого труда, а на сайтах разработчиков присутствуют детальные инструкции по использованию их продукта.
Вскоре мы планируем редизайн сайта «Постовой» и будем использовать в верстке один из jquery плагинов, которые представлены ниже.
Итак. К вашему вниманию коллекция из 20 jquery плагинов выпадающих слайд-панелей для вашего сайта. Не забываем оставлять комментарии.

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

jQuery.mmenu
Легкая слайд-панель навигации для мобильных сайтов. Разработчики сделали хорошую демо страничку, где показано как меню ведет себя в мобильном устройстве.
Демо | Скачать
jQuery плагины и JavaScript решения: Jquery плагины и решения: 20 слайд-панелей навигации для сайта

Swipeable Side Menu
Симпотичное выезжающее меню навигации на jquery в виде слайд-панели. Идеально подойдет как для мобильного сайта, так и для обычного.
Демо | Скачать
jQuery плагины и JavaScript решения: Jquery плагины и решения: 20 слайд-панелей навигации для сайта

Transitions for Off-Canvas Navigations

Чрезвычайно мощный плагин позволяющий организовать слайд-панель, которая будет показываться с разными анимационными эффектами в том числе и 3D. Плагин включает в себя 14 эффектов анимации.
Демо | Скачать
jQuery плагины и JavaScript решения: Jquery плагины и решения: 20 слайд-панелей навигации для сайта

jPanelMenu
Панель навигации выполнена в стилистике IOS приложений. Легкое и быстрое меню, которое облегчит разработку мобильного сайта.
Демо | Скачать
jQuery плагины и JavaScript решения: Jquery плагины и решения: 20 слайд-панелей навигации для сайта

Recreate Google Nexus Menu
Выезжающая панель выполнена по аналогии с Google Nexus меню.
Демо | Скачать
jQuery плагины и JavaScript решения: Jquery плагины и решения: 20 слайд-панелей навигации для сайта

bigSlide — слайд-панель навигации на Jquery
Слайд-панель подойдет как для мобильного сайта, так и для обычного. Чтоб ее вызвать, требуется нажать на иконку изображающую три полоски.
Демо | Скачать
jQuery плагины и JavaScript решения: Jquery плагины и решения: 20 слайд-панелей навигации для сайта

Multi-Level Push Menu
Jqutry плагин работает по аналогии с bigSlide. Панель вызывается при клике на иконку. Преимущество этого меню в том, что оно поддерживает многоуровневую структуру.
Демо | Скачать
jQuery плагины и JavaScript решения: Jquery плагины и решения: 20 слайд-панелей навигации для сайта

Box Lid Menu
Очень красивая слайд-панель навигации с 3D эффектом.
Демо | Скачать
jQuery плагины и JavaScript решения: Jquery плагины и решения: 20 слайд-панелей навигации для сайта

Animated Border Menus
Кликнув на плюсик в уголку экрана появляется маленькая боковая панель с иконками. Чтоб ее скрыть, требуется нажать на иконку с символом "-".
Демо | Скачать
jQuery плагины и JavaScript решения: Jquery плагины и решения: 20 слайд-панелей навигации для сайта

Snap.js
Слайд-панель предназначена для мобильных устройств. Меню вызывается с помощью перетаскивания экрана курсором мышки или, если на мобильном устройстве, пальцем.
Демо | Скачать
jQuery плагины и JavaScript решения: Jquery плагины и решения: 20 слайд-панелей навигации для сайта

Slide and Push Menus
Демо | Скачать
jQuery плагины и JavaScript решения: Jquery плагины и решения: 20 слайд-панелей навигации для сайта

Meny
Jquery плагин позволяющий реализовать у себя на сайте классную слайд-панель навигации с 3D эффектом.
Демо | Скачать
jQuery плагины и JavaScript решения: Jquery плагины и решения: 20 слайд-панелей навигации для сайта

mb.jquery
В отличии от других панелей, она появляется поверх экрана, а не двигает его. В блоке можно поместить любой html, текст и вообще все что вам угодно.
Демо | Скачать
jQuery плагины и JavaScript решения: Jquery плагины и решения: 20 слайд-панелей навигации для сайта

Android Dock
Панель заточена под мобильные сайты и находится внизу экрана. При нажатии появляются иконки, в которые можно поместить любые ссылки.
Демо | Скачать
jQuery плагины и JavaScript решения: Jquery плагины и решения: 20 слайд-панелей навигации для сайта

Слайд-панель с контентом
Классная слайд-панель выполнена в виде двух уровней. Первый — меню. Второй — контент. Сейчас такой эффект очень популярен среди дизайнеров и веб-разработчиков. Можно найти массу вариантов применения. По похожему принципу работает почтовик майкрософта.
Демо | Скачать
jQuery плагины и JavaScript решения: Jquery плагины и решения: 20 слайд-панелей навигации для сайта

Responsive Side Toggle Menu
Слайд-панель заточена под адаптивные сайты.
Демо | Скачать
jQuery плагины и JavaScript решения: Jquery плагины и решения: 20 слайд-панелей навигации для сайта

Sidr
Демо | Скачать
jQuery плагины и JavaScript решения: Jquery плагины и решения: 20 слайд-панелей навигации для сайта

PageSlide
Демо | Скачать
jQuery плагины и JavaScript решения: Jquery плагины и решения: 20 слайд-панелей навигации для сайта

Slidepanel
Демо | Скачать
jQuery плагины и JavaScript решения: Jquery плагины и решения: 20 слайд-панелей навигации для сайта

Слайд-панель навигации для мобильного
Демо | Скачать
jQuery плагины и JavaScript решения: Jquery плагины и решения: 20 слайд-панелей навигации для сайта
Напишите свой комментарий
comments powered by HyperComments