Выезжающее меню на чистом CSS

Выезжающее меню при клике по кнопке без использования скриптов, то есть на чистом html + CSS. Статья будет полезна тем, кто  хочет создать свой сайт и изучает верстку. Пример того как это работает можно посмотреть кликнув по ссылке ниже. Или как это было реализовано на одном из созданных мною сайтов в видео ниже.

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

>>> Посмотреть пример выезжающее меню

Вначале добавляем html разметку. Это обычное меню сделанное списком, но его особенность это checkbox. Обычный чекбокс с label, которые мы и превратим в кнопку, то есть бургер меню. Бургер меню — это обычно три полоски расположены друг под другом, напоминая бургер. Поэтому меню и носит такое название. Для посетителей сайтов и пользователей мобильных устройств данный вид кнопки привычный и люди интуитивно понимают что это кнопка меню. Как раз нажимая на наш чекбокс в виде бургера и будет происходить появление панели с пунктами меню.

На вашем сайте в то место где вы хотите разместить бургер кнопку выезжающего меню добавьте  следующий html код:

<div class="burger-menu">
<input id="menu-toggle" type="checkbox" />
<label class="menu-btn" for="menu-toggle">
<span></span>
</label>

<ul class="menubox">
<li><a class="menu-item" href="#">Home</a></li>
<li><a class="menu-item" href="#">About us</a></li>
<li><a class="menu-item" href="#">Blog</a></li>
<li><a class="menu-item" href="#">Articles</a></li>
<li><a class="menu-item" href="#">Contacts</a></li>
</ul>
</div>

Давайте разберемся что и как тут устроено и для чего каждый элемент

• Сначала идет главный блок-контейнер с классом burger-menu, внутри которого и располагается наше меню и кнопка бургер. Можете задавать любой класс или вообще изъять все меню и кнопку из контейнера. Он не обязателен. Он сделан для удобства. Возможно вам он будет мешать. Например, вы решите разместить меню в виде UL списка в одном месте, а кнопку-чекбокс бургер меню в другом.
• Далее идет чекбокс с ID — menu-toggle, которое менять нельзя (можно, если вы понимаете что делает и аналогично смените в стилях CSS все подвязки к этому айди). Чекбокс будет скрываться но он и будет кнопкой, его мы модифицируем.
• Далее идет label с классом —menu-btn, менять тоже не нужно, если для вас это не критично. Внутри label расположен span элемент, который в будущем будет полосками бургер меню. Сделаем это благодаря псевдоэлементам before и after.
• После идет наше основное меню в виде ul списка с классом — menubox. Наш чекбокс, будет использовать данный класс, чтобы открыть панель. Тут как вам удобно, располагаете пункты вашего меню со ссылками. Классы, порядок, структуру — делаете как вам нравится, у меня просто сделано для примера пять простых пунктов в виде ссылок.

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

Далее добавим CSS стили, потом вы сможете их поменять под дизайн вашего сайта. Открывайте свой файл стилей и добавьте в него следующий код:

.menu-btn{
display: flex;
align-items: center;
position: absolute;
top: 0;
right:0;
width: 26px;
height: 26px;
cursor: pointer;
z-index: 1;
}
.menu-btn > span,
.menu-btn > span::before,
.menu-btn > span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #616161;
transition-duration: .25s;
}
.menu-btn > span::before {
content: '';
top: -8px;
}
.menu-btn > span::after {
content: '';
top: 8px;
}

.menubox{
display: block;
position: fixed;
visibility: hidden;
top: 0;
left: -100%;
width: 300px;
height: 100%;
margin: 0;
padding: 80px 0;
list-style: none;
background-color: #ECEFF1;
box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
transition-duration: .25s;
}

.menu-item {
display: block;
padding: 12px 24px;
color: #333;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 600;
text-decoration: none;
transition-duration: .25s;
}
.menu-item:hover {
background-color: #CFD8DC;
}


#menu-toggle{
opacity: 0;
}

#menu-toggle:checked ~ .menu-btn > span{
transform: rotate(45deg);
}
#menu-toggle:checked ~ .menu-btn > span::before{
top: 0;
transform: rotate(0);
}
#menu-toggle:checked ~ .menu-btn > span::after{
top: 0;
transform: rotate(90deg);
}
#menu-toggle:checked ~ .menubox{
visibility: visible;
left: 0;
}

Задаем стили нашему label и span внутри него, чтобы он стал кнопкой в виде бургера.

.menu-btn{
...
}
...
}
.menu-btn > span::before {
...
}
.menu-btn > span::after {
...
}

Далее задаем стили для  ul списку.

.menubox{
...
}

left: -100%; — в шестой строке это и есть расположение панели меню слева за пределами страницы. Если надо справа, смените на right: -100%;.

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

.menu-item {
...
}
.menu-item:hover {
...
}

Скрываем стандартный чекбокс в виде галочки

#menu-toggle{
opacity: 0;
}

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

#menu-toggle:checked ~ .menu-btn > span{
...
}
#menu-toggle:checked ~ .menu-btn > span::before{
...
}
#menu-toggle:checked ~ .menu-btn > span::after{
...
}
#menu-toggle:checked ~ .menubox{
...
}

В предпоследнем рядке, мы указываем, что панель появится слева в самом начале страницы — left: 0;. Если хотите справа, то просто смените на right: 0;.

Как выезжающее меню было реализовано на одном из созданных мною сайтов смотрите в этом коротком ролике.

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

Читайте о том, как создать фиксированное и липкое меню.