Я использовал данный вариант несколько рази и вот недавно мне попался схожий, но он был сложнее и с большим количеством кода, поэтому я решил опубликовать статью о своем варианте и поделится этим 100% рабочим методом с вами. Пример того как работает все это можно посмотреть нажав на кнопку ниже. Если это то что нужно вам и вы хотите сделать выезжающее меню с левой или правой стороны без использования скриптов у себя на сайте, то давайте перейдем к коду.
Первое что понадобится - добавить 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 стили, чтобы заработало, а уже потом сможете их менять. Открывайте свой файл стилей и добавьте в него следующий кусок кода:
Задаем стили нашему label и span внутри него, чтобы он стал кнопкой в виде бургера.
.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;
}
Далее задаем стили для нашего меню, то бишь ul списку.
.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;
}
left: -100%; - в шестой строке это и есть расположение панели меню слева за пределами страницы. Если надо справа, смените на right: -100%;.
Ну и мои стили для пунктов меню. Тут можете задавать что хотите, свои, эти стили не обязательны
.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;
}
Задаем правила, что делать с нашим бургер меню, и самим меню, когда происходит активирование чекбокса, то есть когда вы жмете по нему и по label. Одну полоску мы поворачиваем, а две нижние поднимаем вверх и тоже поворачиваем и в результате из трех полосок получаем крестик. Так же делаем видимым наш скрытый блок с пунктами меню.
#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;
}
В предпоследнем рядке, мы указываем, что панель появится слева в самом начале страницы - left: 0;. Если хотите справа, то просто смените на right: 0;.
Ну и весь код целиком, если вы не копировали по порядку, предыдущие отрезки.
.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;
}
Если вы все сделали правильно и нигде не допустили ошибку, то все должно работать так как в примере. Очень надеюсь, что вам понравилась статья и вы воспользовались ней. Если у вас возникли вопросы или проблемы, можете обратиться ко мне или заказать услугу по доработке вашего сайта. Контакты можете найти в шапке или подвале сайта.
На этом все, спасибо за внимание. 🙂
