0

У меня есть обычное меню и из него мне нужно сделать бургер меню как на этом сайте (https://www.saxoprint.co.uk/), но когда я начинаю его делать сталкиваюсь например с тем, что мое меню не располагается по вертикали. Буду супер благодарна если сможете на основе моего меню сделать хоть немного рабочий бургер-меню. Спасибо)

/* 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);
}
<!-- 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

1 ответ 1

2

Переписал стили, вёрстка не затронута.
Используется немного JS.

let burger = document.querySelector('.menu-burger__header'),
    menu = document.querySelector('.menu');

burger.addEventListener('click', function(e) {
  menu.classList.toggle('active');
});
.menu {
  display: block;
  width: 320px;
  height: 100%;
  background-color: #ccc;
  position: fixed;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  transition: transform .3s ease-in;
}

.menu.active {
  transform: translateX(0);
}

.menu .container {
  display: block;
  width: 100%;
  height: 100%;
}

.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* burger */

.menu .menu-burger__header {
  width: 30px;
  height: 30px;
  border-radius: 3px;
  background: #333;
  position: absolute;
  left: calc(100% + 10px);
  top: 10px;
  cursor: pointer;
}

/* burger | open */

.menu .menu-burger__header::before,
.menu .menu-burger__header > span,
.menu .menu-burger__header::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  transition-duration: .3s;
  transition-timing-function: ease;
}

.menu .menu-burger__header::before {
  top: calc(50% - 8px);
  transform-origin:
  transition-property: top, transform;
}

.menu .menu-burger__header > span {
  top: 50%;
  transition-property: opacity;
}

.menu .menu-burger__header::after {
  top: calc(50% + 8px);
  transition-property: top, transform;
}

/* burger active | close */

.menu.active .menu-burger__header::before {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.menu.active .menu-burger__header > span {
  opacity: 0;
}

.menu.active .menu-burger__header::after {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* menu list */

.menu .topmenu {
  display: block;
  width: 100%;
  max-height: 100%;
  overflow: hidden auto;
  padding: 10px 20px;
  box-sizing: border-box;
}

.menu .topmenu a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.menu .topmenu > li:not(:last-child) {
  margin-bottom: 1em;
}

.menu .topmenu > li > a {
  font-weight: bold;
}

/* submenu list */

.menu .topmenu .submenu {
  display: block;
  padding-left: 1em;
  margin-top: .5em;
}

.menu .topmenu .submenu > li:not(:last-child) {
  margin-bottom: .5em;
}

.menu .topmenu .submenu li:hover {
  color: orangered;
}
<!-- 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.