Добрый вечер, очень нужно меню (для мобильных версий) как на этом сайте(
https://www.saxoprint.co.uk/). У меня есть обычное меню и из него мне нужно сделать бургер меню как на этом сайте, но когда я начинаю его делать сталкиваюсь например с тем, что мое меню не располагается по вертикали. Буду супер благодарна если сможете на основе моего меню сделать хоть немного рабочий бургер-меню. Спасибо)
<!-- Menu-->
<nav class="menu">
<div class="container">
<div class="menu-burger__header">
<span></span>
</div>
<ul class="topmenu">
<li><a href="" class="a">рекламная продукция</a>
<ul class="submenu">
<li><a href="">Визитки</a></li>
<li><a href="">Листовки</a></li>
<li><a href="">Многостраничные изделия</a></li>
<li><a href="">Плакаты</a></li>
<li><a href="">Упаковка</a></li>
<li><a href="">Конверты</a></li>
<li><a href="">Папки</a></li>
<li><a href="">Календари</a></li>
<li><a href="">Пакеты</a></li>
<li><a href="">Календарные сетки</a></li>
<li><a href="">СТР формы</a></li>
<li><a href="">Изделия нестандартных размеров</a></li>
</ul>
</li>
<li><a href="" class="a">картонная упаковка</a></li>
<li><a href="" class="a">флексо печать</a></li>
<!-- <li><a href="" class="a">Производственные мощности</a></li> -->
<li><a href="" class="a">контакты</a></li>
<li><a href="" class="a">о нас</a></li>
</ul>
</div>
</nav
/* Menu
==========================*/
.menu {
display: flex;
position: relative;
z-index: 100;
background: #BDBDBD;
/* text-align: center; */
box-shadow: 0px 10px 10px rgba(26, 63, 119, 0.5);
}
.topmenu {
padding: 0 51px;
justify-content: space-between;
flex-wrap: wrap;
display: flex;
flex-direction: row;
}
nav a {
display: block;
text-align: center;
text-decoration: none;
transition: .2s linear;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.active {
/* font-weight: bold; */
}
.topmenu>li {
text-align: center;
display: inline-block;
position: relative;
}
.topmenu>li>a {
width: 100%;
height: auto;
text-transform: uppercase;
color: #fff;
}
.a {
font-weight: 500;
padding: 15px 15px;
}
.topmenu>li:hover>a {
color: #184fa3;
}
.active:after,
.submenu-link:after {
color: inherit;
}
.topmenu>li:hover {
color: #184fa3;
}
.submenu li a:hover {
color: #DA1111;
}
.submenu {
position: absolute;
z-index: 5;
width: 300px;
border: 1px solid #184fa3;
box-sizing: border-box;
box-shadow: 0px 4px 5px rgba(1, 102, 174, 0.22);
visibility: hidden;
opacity: 0;
transform: translateY(10px);
transition: .3s ease-in-out;
}
.submenu li {
position: relative;
}
.submenu a {
background: #fff;
color: #1c1c1c;
text-align: left;
font-weight: 500;
font-size: 16px;
padding: 10px 20px;
}
.submenu .submenu {
position: absolute;
top: 0;
}
nav li:hover>.submenu {
visibility: visible;
opacity: 1;
transform: translateY(0px);
}
Простой
