20 слайд-панелей навигации для сайта / jQuery плагины и JavaScript решения / Постовой
Сейчас наблюдается интересная тенденция в веб-дизайне. Чем меньше элементов на странице — тем лучше. Но это не значит, что их не должно быть вообще. Большинство блоков, таких как меню навигации по сайту, меню профиля пользователя и т. д. можно скрыть и появляться они будут при нажатии и наведении. Некоторые могут сказать, что от этого страдает юзабилити страницы. Не думаю, так как страница стает чище, а значит легче ориентироваться. Человек не путается в горе ссылок.
Сегодня я подготовил коллекцию слайд-панелей, которые по умолчанию на странице скрыты. Чтоб вызвать меню, требуется нажать или навести мышкой на соответствующую иконку. Этот прием пришел в веб-дизайн из мобильных приложений, где нельзя разметить много элементов на одном экране. Со временем такие панели перекочевали и в веб-сайты. Данная коллекция пригодятся, в первую очередь, разработчиками мобильных, адаптивных сайтов. При маленьком разрешении экрана будет появляться именно такая
Хочу заметить, что в данную коллекцию вошли плагины, которые заточены только под мобильные сайты и на широких мониторах их использование будет неуместно. Хотя присутствуют и универсальные панели, которые подойдут для любого веб-сайта. Смотрите демо и выбирайте, что подойдет под ваши задачи.
Выпадающие панели работают на jquery
Вскоре мы планируем редизайн сайта «Постовой» и будем использовать в верстке один из jquery плагинов, которые представлены ниже.
Итак. К вашему вниманию коллекция из 20 jquery плагинов выпадающих слайд-панелей для вашего сайта. Не забываем оставлять комментарии.
Смотрите также:
20 jQuery плагинов полноэкранного меню
6 jQuery плагинов для создания фиксированного меню
5 адаптивных меню для разных задач
7 jQuery плагинов меню для Bootstrap
Легкая слайд-панель навигации для мобильных сайтов. Разработчики сделали хорошую демо страничку, где показано как меню ведет себя в мобильном устройстве.
Демо | Скачать
Swipeable Side Menu
Симпотичное выезжающее меню навигации на jquery в виде слайд-панели. Идеально подойдет как для мобильного сайта, так и для обычного.Демо | Скачать
Чрезвычайно мощный плагин позволяющий организовать слайд-панель, которая будет показываться с разными анимационными эффектами в том числе и 3D. Плагин включает в себя 14 эффектов анимации.
Демо | Скачать
jPanelMenu
Панель навигации выполнена в стилистике IOS приложений. Легкое и быстрое меню, которое облегчит разработку мобильного сайта.Демо | Скачать
Recreate Google Nexus Menu
Выезжающая панель выполнена по аналогии с Google Nexus меню.Демо | Скачать
bigSlide — слайд-панель навигации на Jquery
Слайд-панель подойдет как для мобильного сайта, так и для обычного. Чтоб ее вызвать, требуется нажать на иконку изображающую три полоски.Демо | Скачать
Multi-Level Push Menu
Jqutry плагин работает по аналогии с bigSlide. Панель вызывается при клике на иконку. Преимущество этого меню в том, что оно поддерживает многоуровневую структуру.Демо | Скачать
Box Lid Menu
Очень красивая слайд-панель навигации с 3D эффектом.Демо | Скачать
Animated Border Menus
Кликнув на плюсик в уголку экрана появляется маленькая боковая панель с иконками. Чтоб ее скрыть, требуется нажать на иконку с символом «-«.Демо | Скачать
Snap.js
Слайд-панель предназначена для мобильных устройств. Меню вызывается с помощью перетаскивания экрана курсором мышки или, если на мобильном устройстве, пальцем.Демо | Скачать
Slide and Push Menus
Демо | Скачать
Meny
Jquery плагин позволяющий реализовать у себя на сайте классную слайд-панель навигации с 3D эффектом.Демо | Скачать
mb.jquery
В отличии от других панелей, она появляется поверх экрана, а не двигает его. В блоке можно поместить любой html, текст и вообще все что вам угодно.Демо | Скачать
Android Dock
Панель заточена под мобильные сайты и находится внизу экрана. При нажатии появляются иконки, в которые можно поместить любые ссылки.Демо | Скачать
Слайд-панель с контентом
Классная слайд-панель выполнена в виде двух уровней. Первый — меню. Второй — контент. Сейчас такой эффект очень популярен среди дизайнеров и веб-разработчиков. Можно найти массу вариантов применения. По похожему принципу работает почтовик майкрософта.Демо | Скачать
Responsive Side Toggle Menu
Слайд-панель заточена под адаптивные сайты.Демо | Скачать
Sidr
Демо | Скачать
PageSlide
Демо | Скачать
Slidepanel
Демо | Скачать
Слайд-панель навигации для мобильного
Демо | Скачать
postovoy.net
Боковое многоуровневое мобильное меню на jQuery
Недавно мы писали о том, как мы относимся к гамбургер меню, но не смотря на это дизайнеры и разработчики все активней его используют, к сожалению, хоть этот тренд отходит и всех уже немного достал, но не стоит забывать о людях которым нравится и они желают видеть такое меню на своем сайте. Сегодня мы хотим рассказать, как создать боковое многоуровневое меню при помощи плагина jQuery. HC MobileNav-это плагин jQuery для создания многоуровневой, мобильной, боковой навигации вне видимой области, которая поддерживает бесконечное вложение элементов.
HC MobileNav выдвигается из левой или правой части веб-страницы при переключении и перекрывает (или расширяет) подменю при открытии родительского меню. Если вы хотите использовать уже готовые меню реализованные в красивых шаблонах, тогда обратите внимание на предложение от наших партнеров, там вы найдете много интересного:
Как использовать:
Создаем разметку многоуровневого меню из вложенного списка навигации, который будет выглядеть следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | <nav>
<ul> <li> <a href=»#» target=»_blank»>Криптовалюта</a> <ul> <li><a href=»#»>Bitcoin</a></li> <li><a href=»#»>Ethereum</a></li> </ul> </li> </ul>
<ul> <li> <a>Девайсы</a> <ul> <li> <a href=»#»>Мобильные телефоны</a> <ul> <li><a href=»#»>Смартфоны</a></li> <li><a href=»#»>Планшеты</a></li> </ul> </li> <li> <a href=»#»>Телевизоры</a> <ul> <li><a href=»#»>Для дома</a></li> <li><a href=»#»>Супер LED</a></li> </ul> </li> <li> <a href=»#»>Камеры</a> <ul> <li><a href=»#»>Профессиональные</a></li> <li><a href=»#»>Маленькие</a></li> </ul> </li> </ul> </li> <li> <a href=»#»>Издания</a> <ul> <li><a href=»#»>National Geographic</a></li> <li><a href=»#»>Scientific American</a></li> <li><a href=»#»>The Spectator</a></li> </ul> </li> <li> <a href=»#»>Магазины</a> <ul> <li> <a href=»#»>Одежды</a> <ul> <li> <a href=»#»>Женская одежда</a> <ul> <li><a href=»#»>Топы</a></li> </ul> </li> <li> <a href=»#»>Мужская одежда</a> <ul> <li><a href=»#»>Рубашки</a></li> </ul> </li> </ul> </li> <li> <a href=»#»>Украшения</a> </li> <li> <a href=»#»>Музыка</a> </li> <li> <a href=»#»>Бакалия</a> </li> </ul> </li> <li><a href=»#»>Коллекции</a></li> <li><a href=»#»>Кредиты</a></li> </ul>
</nav> |
Загрузите последнюю версию библиотеки jQuery и файлы плагина jQuery HC-MobileNav в вашу страницу:
<link href=»hc-mobile-nav.css» rel=»stylesheet»> <script src=»/jquery-3.3.1.slim.min.js» ></script> <script src=»hc-mobile-nav.js»></script> |
Инициализируйте плагин jQuery HC-MobileNav и готово:
$(‘#main-nav’).hcMobileNav(); |
Укажите ширину экрана, при которой breakppint плагин скрывает обычную навигацию:
$(‘#main-nav’).hcMobileNav({ maxWidth: 1024 }); |
Настройте текст для меток закрытия и возврата:
$(‘#main-nav’).hcMobileNav({ insertClose: true, insertBack: true, labelClose: ‘Close’, labelBack: ‘Back’ }); |
Когда HC MobileNav переключен, выдвиньте основное содержание к другой стороне:
$(‘#main-nav’).hcMobileNav({ pushContent: true // по умолчанию false }); |
Задаем направление для HC MobileNav. По умолчанию: left:
$(‘#main-nav’).hcMobileNav({ side: ‘left’ }); |
Дополнительные параметры настройки для HC MobileNav:
$(‘#main-nav’).hcMobileNav({
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | // перекрытие / развернуть / нет levelOpen: ‘overlap’,
// в пикселях levelSpacing: 40,
// показывает заголовки подменю, levelTitles: ложные,
// название первого уровня navTitle: нуль,
// extra CSS класс (ы) navClass:»,
// отключить прокрутку тела disableBody: true,
// закрыть навигацию по щелчку мыши closeOnClick: true,
// пользовательский элемент переключения customToggle: null }); |
В результате у нас есть замечательное многоуровневое меню с поддержкой мобильных устройств. Материал взят из зарубежного источника и переведен нашей командой для ознакомительных целей.
Вот и все. Готово!
Читайте также:
www.rudebox.org.ua
Выдвижная боковая панель на CSS
/* Оформление панели */
#side-checkbox {
display: none;
}
.side-panel {
position: fixed;
z-index: 999999;
top: 0;
left: -360px;
background: #337AB7;
transition: all 0.5s;
width: 320px;
height: 100vh;
box-shadow: 10px 0 20px rgba(0,0,0,0.4);
color: #FFF;
padding: 40px 20px;
}
.side-title {
font-size: 20px;
padding-bottom: 10px;
margin-bottom: 20px;
border-bottom: 2px solid #BFE2FF;
}
/* Оформление кнопки на странице */
.side-button-1-wr {
text-align: center; /* Контейнер для кнопки, чтобы было удобнее ее разместить */
}
.side-button-1 .side-b {
margin: 10px;
text-decoration: none;
position: relative;
font-size: 20px;
line-height: 20px;
padding: 12px 30px;
color: #FFF;
font-weight: bold;
text-transform: uppercase;
font-family: ‘Roboto Condensed’, Тahoma, sans-serif;
background: #337AB7;
cursor: pointer;
border: 2px solid #BFE2FF;
}
.side-button-1 .side-b:hover,
.side-button-1 .side-b:active,
.side-button-1 .side-b:focus {
color: #FFF;
}
.side-button-1 .side-b:after,
.side-button-1 .side-b:before {
position: absolute;
height: 4px;
left: 50%;
bottom: -6px;
content: «»;
transition: all 280ms ease-in-out;
width: 0;
}
.side-button-1 .side-open:after,
.side-button-1 .side-open:before {
background: green;
}
.side-button-1 .side-close:after,
.side-button-1 .side-close:before {
background: red;
}
.side-button-1 .side-b:before {
top: -6px;
}
.side-button-1 .side-b:hover:after,
.side-button-1 .side-b:hover:before {
width: 100%;
left: 0;
}
/* Переключатели кнопки 1 */
.side-button-1 .side-close {
display: none;
}
#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-open {
display: none;
}
#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-close {
display: block;
}
#side-checkbox:checked + .side-panel {
left: 0;
}
/* Оформление кнопки на панеле */
.side-button-2 {
font-size: 30px;
border-radius: 20px;
position: absolute;
z-index: 1;
top: 8px;
right: 8px;
cursor: pointer;
transform: rotate(45deg);
color: #BFE2FF;
transition: all 280ms ease-in-out;
}
.side-button-2:hover {
transform: rotate(45deg) scale(1.1);
color: #FFF;
}
atuin.ru