2

Есть скрытое меню. Раскрывается оно по клику на кнопке.

введите сюда описание изображения

При клике на кнопку, блоку меню присваивается класс menu_active. Меню открывается и скрывается только при клике на кнопку <button>.

$(window).load(function() {
  $('.menu-button').on('click', function() {
    $('.menu').toggleClass('menu_active');
  });
});
.menu_active {
  z-index: 1;
  opacity: 1;
}

.menu {
  z-index: -1;
  width: 100%;
  position: fixed;
  left: 0px;
  top: 80px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.menu-button {
  display: flex;
  background-color: transparent;
  border: none;
  border-right: 1px solid rgba(81, 11, 186, 0.1);
  border-left: 1px solid rgba(81, 11, 186, 0.1);
  height: 80px;
  width: 70px;
}

.menu-button-line {
  width: 20px;
  display: block;
  height: 3px;
  background-color: #89a9eb;
  margin: 2px 0;
}
<button class="menu-button navbar_menu-button">
   <span class="menu-button-line"></span>
   <span class="menu-button-line"></span>
   <span class="menu-button-line"></span>
</button>

<nav class="menu_nav">
  <a href="#" class="menu_link">Главная</a>
  <a href="#" class="menu_link">Каталог скинали</a>
  <a href="#" class="menu_link">Этапы работ</a>
  <a href="#" class="menu_link">Примеры работ</a>
</nav>

Как сделать, чтобы при клике на пункты меню (Главная, Каталог скинали ... ) меню скрывалось и кнопка менялась на Х?

1
  • проверка клика на меню, если да, то скрывайте меню 26 янв 2021 в 14:37

1 ответ 1

1

Пожалуйста, пользуйтесь:

$('.burger, .menu_nav>a').click(function() {
  $('.burger').toggleClass('open');
  $('.menu_nav').toggleClass('menu_nav_active');
});
/*Меню*/

.menu_nav {
  height: 0;
  width: 100%;
  margin-top: 50px;
  line-height: 40px;
  background: cornflowerblue;
  opacity: 0;
  transition: all 1s;
}

.menu_nav_active {
  height: 40px;
  opacity: 1;
}

.menu_nav>a {
  display: inline-block;
  padding: 0 10px;
  text-decoration: none;
  color: white;
}

.menu_nav>a:hover {
  background: deepskyblue;
}


/*Иконка*/

.burger {
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 33px;
  padding: 10px;
}

.burger-brick {
  height: 4px;
  margin-top: 6px;
  background: cornflowerblue;
  transition: 0.3s ease-out;
}

.open .burger-brick:first-child {
  margin-top: 14px;
  transform: rotate(405deg);
}

.open .burger-brick:last-child {
  margin-top: -14px;
  transform: rotate(-405deg);
}

.open .middle {
  transform: scale(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="burger">
  <div class="burger-brick"></div>
  <div class="burger-brick middle"></div>
  <div class="burger-brick"></div>
</div>
<nav class="menu_nav">
  <a href="#" class="menu_link">Главная</a>
  <a href="#" class="menu_link">Каталог скинали</a>
  <a href="#" class="menu_link">Этапы работ</a>
  <a href="#" class="menu_link">Примеры работ</a>
</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.

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