Активировать бургер при клике по div js

168

13 апреля 2017, 17:33

Всем привет. Имеется бургер-меню, которое раскрывается при клике на сам бургер, который тоже меняет свою форму на вид крестика.

То есть при клике на .burger появляется к .menu добавляется класс .open. Я заключил всё меню в div.contain, но при попытке в скрипте вместо .burger вставить .contain меню активируется, а вот сам бургер в "крестик" не трансформируется.

$(".burger").on("click", function() { 
  $(this).toggleClass("active"); 
  $(".menu").toggleClass("open"); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="contain"> 
  <!--добавил div--> 
  <div class="burger"> 
    <span id="melt"><span id="extra-melt"></span></span> 
  </div> 
  <div class="menu"> 
    <ul class="nav"> 
      <li><a href="#services">Услуги</a></li> 
      <li><a href="#advantages">Преимущества</a></li> 
      <li><a href="#projects">Проекты</a></li> 
      <li><a href="#plan">Порядок работ</a></li> 
      <li><a href="#testimonials">Отзывы</a></li> 
      <li><a href="#partners">Партнеры</a></li> 
      <li><a href="#callus">Свяжитесь с нами</a></li> 
    </ul> 
  </div>

Как дописать скрипт так, чтобы при клике на .contain и меню активировалось и сам бургер в крестик трансформировался? Плиз хелп

Answer 1

Вы не привели свои стили, потому добавил свои исходя из вашего JS. И .burger лучше делать кнопкой, а не дивом — так не будет нарушаться семантика и доступность элементов.

$(".burger").on("click", function() { 
  $(this).toggleClass("active"); 
  $(".menu").toggleClass("open"); 
})

.menu { 
  display: none; 
} 
 
.menu.open { 
  display: block; 
} 
 
.burger { 
  width: 20px; 
  height: 21px; 
  display: flex; 
  position: relative; 
  background: none; 
  border: none; 
  padding: 0; 
} 
 
.burger span, 
.burger:before, 
.burger:after { 
  display: block; 
  height: 3px; 
  background-color: #000; 
  width: 100%; 
  margin: auto; 
} 
 
.burger:before, 
.burger:after { 
  position: absolute; 
  top: 0; 
  content: ''; 
  transform-origin: 50% 50%; 
} 
 
.burger:before { 
  top: calc(100% - 3px); 
} 
 
.burger.active span { 
  opacity: 0; 
} 
 
.burger.active:after { 
  transform: rotate(-45deg); 
  top: 9px; 
} 
 
.burger.active:before { 
  transform: rotate(45deg); 
  top: 9px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="contain"> 
  <!--добавил div--> 
  <button class="burger"> 
    <span aria-hidden=true></span> 
  </button> 
  <div class="menu"> 
    <ul class="nav"> 
      <li><a href="#services">Услуги</a></li> 
      <li><a href="#advantages">Преимущества</a></li> 
      <li><a href="#projects">Проекты</a></li> 
      <li><a href="#plan">Порядок работ</a></li> 
      <li><a href="#testimonials">Отзывы</a></li> 
      <li><a href="#partners">Партнеры</a></li> 
      <li><a href="#callus">Свяжитесь с нами</a></li> 
    </ul> 
  </div> 
</div>