Выдвижное боковое меню. Выезжающее меню с помощью CSS и jQuery

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

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

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

• Link 1
• Link 2
• Link 3

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 . Остальные стили написаны для полосок кнопки меню, чтобы они при нажатии превращались в крестик и наоборот.

На данный момент с помощью jQuery можно сделать на сайте всё что угодно, нужно лишь определиться надо ли это вашему сайту. Мы все стремимся сделать сайт наиболее удобный для пользователя, чтобы ему было приятно перемещаться по сайту и это было максимально легко. Меню играет большую роль когда посетитель «гуляет» по вашему сайту. И в этом уроке мы создадим выдвигающееся меню, которое может прятаться и появляться когда это необходимо пользователю.

Также интересные выдвигающиеся меню:

Пример можно увидеть здесь:

Скачать

В этом уроке мы будем использовать jQuery плагин — «jQuery.mmenu.js». Его можно скачать по ссылке — скачать .

Как пользоваться? HTML часть

Сперва подключим необходимые библиотеки и стили:

1 2 3 4 5

Затем определимся со структурой меню. Для примера, чтобы показать как оно работает, я сделаю меню с вложенными элементами. Но у вас оно может быть и более простое:

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

Страница 1 Страница 2 Страница 10 Страница 11 Страница 13 Страница 14 Страница 15 Страница 12 Страница 3 Страница 4 Страница 5 Страница 6 Страница 7 Страница 8 Страница 9

Немного выше меню вставим переключатель, чтобы пользователь мог открыть/закрыть его:

С HTML структурой закончили, сейчас переходим к стилям.

Итак, коротко и ясно… Ниже способ реализации простого выезжающего меню. Код сразу с комментами, что бы было понятно. Тут DEMO . Смысл в том, что нажимаем на значок ☰, и слева выезжает менюшка. Значек бургера превращается в крестик, как в Телеграме 🙂 Затем нажимаем на крестик и менюшка заезжает влево. Всё очень простенько… При желании код и стили легко модернизировать, изменить цвета и размеры. Так же если хотите переместить меню в правую часть, то в стилях просто все left замените на right. Опять же в DEMO песочнице можно экспериментировать. Преимущество такого меню в том, что его можно внедрить в большинство шаблонов.

Вот сама вёрстка :

• HOME


• ABOUT


• CONTACTS

ПРОСТОЕ ВЫЕЗЖАЮЩЕЕ БОКОВОЕ МЕНЮ

Далее CSS стили:

/* стили для боди, тут всё понятно */
body {
margin: 0;
padding: 0;
font-family: Arial;
font-size: 12pt;
background: #f0f0f0;
}
/*стилизуем менюшку*/
.hidden-menu {
display: block;
position: fixed;
list-style:none;
padding: 10px;
margin: 0;
box-sizing: border-box;
width: 200px;
background-color: #2b343c;
height: 100%;
top: 0;
left: -200px;
transition: left .2s;
z-index: 2;


}
.hidden-menu li a {text-decoration: none; color:#cacaca;}
.hidden-menu li a:hover {color:#fff;}
/*скрываем инпут чекбокс*/
.hidden-menu-ticker {
display: none;
}
/*общие стили значка-гамбургера, самого лэйбла*/
.btn-menu {
color: #fff;
background-color: #fff;
padding: 2px;
position: fixed;
top: 5px;
left: 5px;
cursor: pointer;
transition: left .23s;
z-index: 3;
width: 20px;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
/*общие стили полосок*/
.btn-menu span {
display: block;
height: 2px;
background-color: #2b343c;
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;
background-color: #2b343c;
}
/*и дальше стили меняющие бургер, двигающие менюшку по событию - нажатие на значек бургера*/
.hidden-menu-ticker:checked ~ .hidden-menu {
left: 0;
}
.hidden-menu-ticker:checked ~ .btn-menu span.first {
-webkit-transform: rotate(45deg);
top: 7px;
background-color: #fff;
}
.hidden-menu-ticker:checked ~ .btn-menu span.second {
opacity: 0;
}
.hidden-menu-ticker:checked ~ .btn-menu span.third {
-webkit-transform: rotate(-45deg);
top: -7px;
background-color: #fff;
}
/*ну а тут такое, стиль заголовка, шоб симпотичнее было:)*/
header {
background-color: #fff;
color: #2487ca;
text-align: center;
padding: 5px;
}
h1 {
margin: 0;
padding: 0;
font-size: 17px;
font-weight: normal;
}

Если есть вопросы, задавайте в комментах. Делитесь статьёй в соц. сетях. Спасибо 😉

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

ШАГ 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, скрипт бы работал некорректно, а меню, при нажатии на кнопку его открытия, просто бы открывалось и моментально закрывалось.

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

Резюме

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

В данной статье хочу предложить вашему вниманию пример создания выезжающего меню . Данный пример выезжающего меню создан с помощью CSS и jQuery .

Меню выезжает сверху при нажатии на «кнопку» расположенную по центру в самом верху.

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

Изменить скорость с которой меню выезжает вниз или прячется вверх очень просто, для этого необходимо изменить значения нескольких строчек скрипта:

Для изменения скорости выезжания меню измените числовое значение в строчке:

SlideMenu.slideDown(300);

Для изменения скорости заезжания меню вверх измените числовое значение в строчке:

SlideMenu.slideUp(300);

Чем больше числовое значение, тем медленнее будет эффект выезжания или заезжания меню.

Важно! Для работы с данным примером трансформации текста не забудьте обязательно подключить библиотеку jQuery.

Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже.

HTML

• Меню 1
• Меню 2
• Меню 3
• Меню 4
• Меню 5

Выезжающее меню Нажмите

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

Револьверы описываются как огромные и тяжёлые, с рукоятками жёлтого цвета из самой лучшей сандаловой древесины. Когда Роланд разыскивает патроны для своего оружия в Нью-Йорке («Извлечение троих») оказывается, что ему подходят патроны от винчестера сорок пятого калибра (в оригинале от лонг кольта того же калибра).

Для справки, первые "универсальные" патроны.44-40 Winchester применялись и в рычажной винтовке Winchester Model 1873, и револьвере Colt Peacemaker 1878; Под патрон.45 Long Colt компании Navy Arms, Rossi, Marlin и Winchester выпускают для современной "ковбойской" стрельбы винтовки «Ливер экшн» со скобой Генри и подствольным магазином, этот же патрон использовался в переделках Peacemaker и Colt Single Action Army.

CSS body { border-top: 10px solid #ff725d; } h1 { margin: 90px 0 50px; color: #666; text-align: center; font-size: 50px; } .content { margin: 0 auto 20px; max-width: 680px; padding: 0 3%; } .content img { width: 260px; height: auto; border: solid 10px #fff; box-shadow: 0 1px 2px #999; float: left; margin: 0 3% 3%; } p { font-size: 110%; text-align: center; line-height: 1.5; margin: 0 0 15px; } .slide_container { width: 100%; position: absolute; top: 0; z-index: 999; } #menu { padding: 50px 0; border-bottom: solid 10px #ff725d; background: #fff; display: none; } #menu ul { overflow: hidden; margin: 0 auto; padding: 0; max-width: 800px; width: 100%; } #menu li { float: left; padding: 0; width: 20%; list-style: none; } #menu li a { display: block; margin: 0 5%; padding: 20px 0; border: solid 1px #333; background: #fff; color: #666; text-align: center; text-decoration: none; font-size: 18px; } #menu li a:hover { border: solid 1px #12a1c6; color: #12a1c6; } #menu li a:active { border: solid 1px #0e7b97; color: #0e7b97; } #btn { margin: 0 auto; width: 200px; height: 30px; border-radius: 0 0 5px 5px; background: #ff725d; cursor: pointer; } #btn span { position: relative; top: 12px; left: 50%; display: block; margin-left: -25px; width: 50px; height: 5px; border-radius: 5px; background: #fff; box-shadow: inset 1px 1px 2px #ddd; } .layer { position: fixed; top: 0; width: 100%; height: 100%; background-color: #ff725d; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; opacity: 0.5; } @media screen and (max-width: 480px) { #menu { padding: 5%; } #menu li { width: 100%; } #menu li a { border-top: none; } #menu li a:hover { margin-top: -1px; } #menu li:first-child a { border-top: solid 1px #333; } #menu li:first-child a:hover { margin-top: 0; border-top: solid 1px #12a1c6; } } JS $(function() { var openBtn = $("#btn"), slideMenu = $("#menu"), layer = $("").addClass("layer"); openBtn.on("click", function() { if (slideMenu.is(":hidden")) { layer.appendTo("body"); slideMenu.slideDown(300); } else { slideMenu.slideUp(300); layer.remove(); } }); });

В данной статье хочу предложить вашему вниманию пример создания выезжающего меню. Данный пример выезжающего меню создан с помощью CSS и jQuery. Меню выезжает сверху при нажатии на "кнопку" расположенную по центру в самом верху. После того как меню выехало, вся остальная область страницы становится недоступной для выделения мышкой. Изменить скорость с которой меню выезжает вниз или прячется вверх очень просто, для этого необходимо изменить значения нескольких строчек скрипта: Для изменения скорости выезжания меню измените числовое значение в строчке: Для изменения скорости заезжания меню вверх измените числовое значение в строчке: Чем больше числовое значение, тем медленнее будет эффект выезжания или заезжания меню. Важно! Для работы с данным…