Body, html { height : 100 % ; margin : 0 ; overflow:hidden ; font-family : helvetica; font-weight : 100 ; } .container { position : relative ; height : 100 % ; width : 100 % ; left : 0 ; -webkit-transition: left 0 .4s ease-in-out; -moz-transition: left 0 .4s ease-in-out; -ms-transition: left 0 .4s ease-in-out; -o-transition: left 0 .4s ease-in-out; transition: left 0 .4s ease-in-out; } .container .open-sidebar { left : 240px ; } #sidebar { position : absolute ; left : -240px ; background : #DF314D ; width : 240px ; height : 100 % ; box-sizing: border-box; } #sidebar ul { margin : 0 ; padding : 0 ; list-style : none ; } #sidebar ul li { margin : 0 ; } #sidebar ul li a { padding : 15px 20px ; font-size : 16px ; font-weight : 100 ; color : white ; text-decoration : none ; display : block ; border-bottom : 1px solid #C9223D ; -webkit-transition: background 0 .3s ease-in-out; -moz-transition: background 0 .3s ease-in-out; -ms-transition: background 0 .3s ease-in-out; -o-transition: background 0 .3s ease-in-out; transition: background 0 .3s ease-in-out; } #sidebar ul li:hover a { background : #C9223D ; } .main-content { width : 100 % ; height : 100 % 100 % 100 % ; line-height : 160 % ; } .main-content #sidebar-toggle { background : #DF314D ; border-radius: 3px ; display : block ; position : relative ; padding : 10px 7px ; float : left ; } .main-content #sidebar-toggle .bar { display : block ; width : 18px ; margin-bottom : 3px ; height : 2px ; background-color : #fff ; border-radius: 1px ; } .main-content #sidebar-toggle .bar :last-child { margin-bottom : 0 ; }

;

Теперь мы спрячем боковое меню влево с помощью свойств position:relative и left: -240px, это значение равняется ширине бокового меню. Мы добавили кнопку и скрипт jQuery, что позволит нам вызвать боковое меню по нажатию, переключая класс open-sidebar для контейнера, в котором находятся боковое меню и блок main-content.

После этого мы просто передвигаем весь контейнер влево на 240px, и это заставит появиться левое боковое меню. Если пользователь снова нажмет на кнопку, скрипт jQuery удалит класс у контейнера, и боковое меню исчезнет. Чтобы анимировать боковое меню так, как будто оно приезжает из левого края экрана, мы добавили переход стиля, чтобы создать такую же функциональность, как у приложений для смартфонов.

Теперь у нас есть простое боковое меню, которое вызывается нажатием кнопки мыши.

3. Делаем меню вытягиваемым

Body, html { height : 100 % ; margin : 0 ; overflow:hidden ; font-family : helvetica; font-weight : 100 ; } .container { position : relative ; height : 100 % ; width : 100 % ; left : 0 ; -webkit-transition: left 0 .4s ease-in-out; -moz-transition: left 0 .4s ease-in-out; -ms-transition: left 0 .4s ease-in-out; -o-transition: left 0 .4s ease-in-out; transition: left 0 .4s ease-in-out; } .container .open-sidebar { left : 240px ; } .swipe-area { position : absolute ; width : 50px ; left : 0 ; top : 0 ; height : 100 % ; background : #f3f3f3 ; z-index : 0 ; } #sidebar { background : #DF314D ; position : absolute ; width : 240px ; height : 100 % ; left : -240px ; box-sizing: border-box; -moz-box-sizing: border-box; } #sidebar ul { margin : 0 ; padding : 0 ; list-style : none ; } #sidebar ul li { margin : 0 ; } #sidebar ul li a { padding : 15px 20px ; font-size : 16px ; font-weight : 100 ; color : white ; text-decoration : none ; display : block ; border-bottom : 1px solid #C9223D ; -webkit-transition: background 0 .3s ease-in-out; -moz-transition: background 0 .3s ease-in-out; -ms-transition: background 0 .3s ease-in-out; -o-transition: background 0 .3s ease-in-out; transition: background 0 .3s ease-in-out; } #sidebar ul li:hover a { background : #C9223D ; } .main-content { width : 100 % ; height : 100 % ; padding : 10px ; box-sizing: border-box; -moz-box-sizing: border-box; position : relative ; } .main-content .content { box-sizing: border-box; -moz-box-sizing: border-box; padding-left : 60px ; width : 100 % ; } .main-content .content h1{ font-weight : 100 ; } .main-content .content p{ width : 100 % ; line-height : 160 % ; } .main-content #sidebar-toggle { background : #DF314D ; border-radius: 3px ; display : block ; position : relative ; padding : 10px 7px ; float : left ; } .main-content #sidebar-toggle .bar { display : block ; width : 18px ; margin-bottom : 3px ; height : 2px ; background-color : #fff ; border-radius: 1px ; } .main-content #sidebar-toggle .bar :last-child { margin-bottom : 0 ; }

; $(".swipe-area" ) .swipe ({ swipeStatus:function (event, phase, direction, distance, duration, fingers) { if (phase=="move" && direction =="right" ) { $(".container" ) .addClass ("open-sidebar" ) ; return false ; } if (phase=="move" && direction =="left" ) { $(".container" ) .removeClass ("open-sidebar" ) ; return false ; } } } ) ;

Самая сложная часть этого урока - сделать боковое меню вытягиваемым как на браузерах для смартфонов, так и на веб-браузерах для настольных компьютеров. На этом этапе нам нужно подключить хороший плагин, под названием TouchSwipe , созданный Matt Bryson для управления процессом вытягивания меню. Убедитесь, что этот плагин подключен в Вашем HTML файле.

Теперь, когда у нас есть возможность обнаружить жесты вытягивания и перетаскивания на смартфоне, мы воспользуемся этим, чтобы вызвать боковое меню. Ранее мы столкнулись с проблемой, так как мы применили обнаружение действия вытягивания для страницы целиком, то на смартфонах стало невозможно прокручивать страницу при увеличении, потому что открывалось боковое меню.

Так как это неприемлемо, мы добавили пустой блок класса swipe-area, чтобы определить область обнаружения жеста вытягивания. Область определения вытягивания расположена у левого края страницы, так что пользователь сможет вызвать боковое меню вытягиванием направо у левого края экрана. Это решает проблему случайного открытия меню при прокрутке страницы.

В нашем скрипте JS мы определяем действие вытягивания, использую функцию swipe(), выполняемую плагином TouchSwipe. Мы обнаруживаем две части действия вытягивания: движение и направление. Мы просто добавляем класс open-sidebar, чтобы вызвать меню, когда курсор мыши или палец пользователя движется вправо. Мы удаляем этот класс, если курсор мыши или палец пользователя движется в противоположном направлении.

В нашем эксперименте эта функция отлично работает на смартфонах, но не очень хорошо работает в браузерах на настольных компьютерах, так как когда мы двигаем мышку с зажатой кнопкой, браузеры запускают инструмент по выделению текста, который перебивает наше действие по определению вытягивания. Нам это не нужно, поэтому мы возвращаем false после того, как мы добавляем или удаляем класс open-sidebar. И это предотвращает запуск инструмента по выделению текста по умолчанию.

Заключение

И это все! У нас теперь есть вытягиваемое боковое меню, которое работает как в браузерах на настольных компьютерах, так и на смартфонах. Надеемся, что Вам понравился этот урок.

Перевод — Дежурка

Итак, коротко и ясно… Ниже способ реализации простого выезжающего меню. Код сразу с комментами, что бы было понятно. Тут 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, скрипт бы работал некорректно, а меню, при нажатии на кнопку его открытия, просто бы открывалось и моментально закрывалось.

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

Резюме

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

Продолжаем делать выезжающее боковое меню по клику, в первой части урока была сделана 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% */