Боковое слайд меню. Выдвигающееся боковое меню. Вертикальное меню в стиле «схема метро»

Оставьте комментарий 6,950

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

Swipeable Side MenuСимпотичное выезжающее меню навигации на jquery в виде слайд-панели . Идеально подойдет как для мобильного сайта, так и для обычного.

Transitions for Off-Canvas Navigations Чрезвычайно мощный плагин позволяющий организовать слайд-панель , которая будет показываться с разными анимационными эффектами в том числе и 3D. Плагин включает в себя 14 эффектов анимации.

jPanelMenuПанель навигации выполнена в стилистике IOS приложений. Легкое и быстрое меню, которое облегчит разработку мобильного сайта.

Recreate Google Nexus MenuВыезжающая панель выполнена по аналогии с Google Nexus меню.

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

Multi-Level Push MenuJqutry плагин работает по аналогии с bigSlide. Панель вызывается при клике на иконку. Преимущество этого меню в том, что оно поддерживает многоуровневую структуру.

Box Lid MenuОчень красивая слайд-панель навигации с 3D эффектом.

Animated Border MenusКликнув на плюсик в уголку экрана появляется маленькая боковая панель с иконками. Чтоб ее скрыть, требуется нажать на иконку с символом "-".

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

Slide and Push Menus |

MenyJquery плагин позволяющий реализовать у себя на сайте классную слайд-панель навигации с 3D эффектом.

mb.jqueryВ отличии от других панелей, она появляется поверх экрана, а не двигает его. В блоке можно поместить любой html, текст и вообще все что вам угодно.

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

Слайд-панель с контентомКлассная слайд-панель выполнена в виде двух уровней. Первый - меню. Второй - контент. Сейчас такой эффект очень популярен среди дизайнеров и веб-разработчиков. Можно найти массу вариантов применения. По похожему принципу работает почтовик майкрософта.

Мы сейчас быстро и легко сделаем вертикальное меню, которое будет анимировано выезжать с боку при нажатии на кнопку его вызова.

ШАГ 1. Добавление меню в HTML файл

Вставьте в html файл код ниже:

МЕНЮ

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

ШАГ 2. Добавление стилей

Сейчас мы немного стилизуем наше меню и все кнопки. Вставьте в ваш css файл код ниже:

Button { background: transparent; border: transparent; outline: none; cursor: pointer; margin: 50px 90px; font-weight: bold; font-size: 24px; color: #6c7d96; transition: 0.2s; } button:hover { transition: 0.2s; opacity: 0.7; } button:active { transition: 0.2s; opacity: 0.4; } nav { background-color: #6c7d96; width: 250px; position: relative; left: -999px; transition: 0.5s ease; } nav ul li { padding: 20px 0; text-align: center; transition: 0.2s; } nav ul li:hover { cursor: pointer; background-color: #454954; transition: 0.2s; } nav ul li:active { background-color: #23252b; transition: 0.2s; } nav ul li a { color: white; text-decoration: none; font-weight: bold; font-size: 21px; }

Самая важная часть кода записана в селекторе nav . С помощью относительного позиционирования мы скрываем наше меню за пределы видимой части страницы прописывая негативное значение для left .

Примечание . Вы можете использовать и фиксированное позиционирование если вам необходимо прилепить меню к экрану при прокрутке. Работать это будет идентично нашему варианту.

ШАГ 3. Подключение скрипта

В ваш js файл вам необходимо вставить этот код:

$(document).ready(function() { $(".openButton").click(function() { if(!$(".openButton").hasClass("openDone")) { $(".openButton").addClass("openDone"); $("nav").css("left", "0px"); } else { $(".openButton").removeClass("openDone"); $("nav").css("left", "-999px"); } }); /* Подключать тогда, когда вы изначально хотите делать меню адаптивным после определённого размера экрана Этот код решает проблему случайно исчезающего меню при изменении размера экрана браузера Здесь ставьте ширину при которой включается адаптивный дизайн вашего меню $(window).resize(function() { if ($(window).width() > 1200) { $("nav ul li").removeAttr("style"); } }); */ });

Скрипт проверяет событие click у кнопок с классом openButton, который мы им давали ранее. Сразу же идет проверка на присутствие класса openDone. В зависимости от наличия этого класса у кнопок, данный скрипт решает, закрывать ли меню или открывать.

К слову, этот класс мы нигде не прописывали. Он выполняет роль некого переключателя. Это работает таким образом, что когда идет нажатие на кнопку «МЕНЮ «, всем кнопкам с классом openButton добавляется класс openDone. И когда пользователь снова нажимает на какую-то из кнопок меню, скрипт убирает класс openDone у этих кнопок.

Соответственно, этот класс нужен только для скрипта, чтобы он понимал в какие моменты нужно выводить меню, а в какие закрывать его. Если бы мы не добавляли класс openDone, скрипт бы работал некорректно, а меню, при нажатии на кнопку его открытия, просто бы открывалось и моментально закрывалось.

Примечание . Закомментированный внизу код нужно подключать в том случае, если вы используете этот скрипт для анимации адаптивной версии вашего горизонтально меню. Он решает проблему исчезающего меню при увеличении размера экрана.

Резюме

Мы сделали максимально простое анимированно появляющееся меню с боку при нажатии на кнопку. Как вы видите здесь нет абсолютно ничего сложного. Вы можете улучшать этот код и видоизменять его как вам только заблагорассудится.

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

И снова ДЕМО , для начала.

Начнем пожалуй со HTML -структуры:

input нам необходим для определения видимости меню: то есть если он выбран, то меню видно и наоборот.

label – это наша кнопка-бургер, которая привязана к инпуту.

ul – сам блок меню.

Теперь CSS (писал только для WebKit -браузеров: Opera 16+, Safari, Chrome).

Наше меню:

Hidden-menu { display: block; position: fixed; list-style:none; padding: 10px; margin: 0; box-sizing: border-box; width: 200px; background-color: #eee; height: 100%; top: 0; left: -200px; transition: left .2s; z-index: 2; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; }

Здесь много раздолья для креативных людей, но главные параметры – это width и left . Он должны иметь одинаковое значение, но left при этом является отрицательным. Тем самым мы прячем нашу меню слева от экрана. Также добавил анимацию transition: left .2s для красоты процесса выезда из-за пределов экрана.

Наш чекбокс:

Hidden-menu-ticker { display: none; }

Его просто делаем невидимым.

Кнопка-бургер:

Btn-menu { color: #fff; background-color: #666; padding: 5px; position: fixed; top: 5px; left: 5px; cursor: pointer; transition: left .23s; z-index: 3; width: 25px; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } .btn-menu span { display: block; height: 5px; background-color: #fff; margin: 5px 0 0; transition: all .1s linear .23s; position: relative; } .btn-menu span.first { margin-top: 0; }

Оформлять также можно как угодно. Я сделал просто серую кнопку с белыми полосками в левом верхнем углу. Сюда тоже добавил анимации для самой кнопки и для полосок (просто для красоты).

Теперь, так называемая «магия»:

Hidden-menu-ticker:checked ~ .btn-menu { left: 160px; } .hidden-menu-ticker:checked ~ .hidden-menu { left: 0; } .hidden-menu-ticker:checked ~ .btn-menu span.first { -webkit-transform: rotate(45deg); top: 10px; } .hidden-menu-ticker:checked ~ .btn-menu span.second { opacity: 0; } .hidden-menu-ticker:checked ~ .btn-menu span.third { -webkit-transform: rotate(-45deg); top: -10px; }

CSS3-селекторы позволяют нам определять состояние чекбокса и применять, в зависимости от этого те или иные свойства для соседних элементов:checked ~ . В данном примере мы при «чекнутом» инпуте сдвигаем кнопку меню.hidden-menu-ticker:checked ~ .btn-menu влево на 160 пикселей, меню до левого края.hidden-menu-ticker:checked ~ .hidden-menu . Остальные стили написаны для полосок кнопки меню, чтобы они при нажатии превращались в крестик и наоборот.

В этом посте мы сделаем фиксированное боковое информационное меню. Для реализации иконок подключим шрифт .

Шаг 1. Подключаем шрифт с иконками, создаем пустой документ

Подробную инфу о работе со шрифтом FontAwesome и ссылку на сам проект вы можете найти в моем посте – .

Вот код странички с подключенными файлами:

Фиксированное боковое меню

Шаг 2. Добавляем HTML разметку фиксированного меню

Вот и сам код разметки нашего фиксированного меню:

Как вы заметили я применил тег – это элемент разметки html5, если вы используете html4, то можете заменить этот тег на обычный или вовсе его убрать, а идентификатор перенести к списку, вот так:

© Copyright 2024, https://qzoreteam.ru