Фиксированное боковое меню на чистом CSS. Делаем выезжающее боковое меню на чистом 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, то можете заменить этот тег на обычный или вовсе его убрать, а идентификатор перенести к списку, вот так:

Loading...Loading...