Всплывающее боковое меню для мобильных. Делаем выезжающее боковое меню на чистом CSS

Продолжаем делать выезжающее боковое меню по клику, в первой части урока была сделана HTML -разметка, стилизованы все селекторы, теперь осталось добавить JS динамику.

Обращаемся к библиотеке jQuery

$(".menu-icon").on("click", function(e) {

которая найдёт выезжающее меню с классом menu и применит метод toggleClass к меню. Метод toggleClass присваивает и удаляет классы у элемента.

$(".menu").toggleClass("menu_active");

При клике по иконке-бургеру слева выезжает меню . Теперь надо сделать так, чтобы контент отодвигался, уступая место меню. Для этого создадим новый класс section_active , который при событии будет двигать секцию с контентом на 25% вправо, как и меню.

Section_active {
transform: translateX(25%);
}

Добавим к селектору section плавность - transition в полсекунды. Чтобы секция не перекрывала собой иконку, то зададим ей позицию - relative , секция должна быть на нижнем слое - z-index: 0 .

Section {
transition: 0.5s;
position: relative;
z-index: 0;
}

Вытащим меню поверх секции

Menu {
z-index: 1;
}

Вернемся к jQuery , который найдет элемент section , присвоим ему класс section_active .

$("section").toggleClass("section_active");
})

Итак, мы получили полностью адаптивное меню, которое хорошо работает на всех разрешениях экрана.

Весь код + результат Выезжающее меню справа Для лучшего усвоения урока, давайте разберём, как сделать выезжающее меню справа по клику, отодвигая основной контент влево. Ситуация абсолютно зеркальная, изменений требуют несколько значений у меню.

Menu {
left: 75%; /* вместо 0 */
transform: translateX(100%); /* вместо -100% */
}
и одно значение у секции при клике

Section_active {
transform: translateX(-25%); /* вместо 25% */

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

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

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












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

Далее 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. Подключаем шрифт с иконками, создаем пустой документ

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

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

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

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

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

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