Не могу сделать адаптивное меню?

Question

[Super Star]

При разрешении 992 менюшка скрывается и появляется кнопка "MENU" При нажатии меню выезжает, но при многократном нажатии оно открывается и закрывается много раз. В общем я еще туповат чтобы сделать так чтобы оно не скакало туда/сюда.

Вот что я накарякал:

$('.nav_trigger').click(function(e){
	e.preventDefault();
  $('.nav_menu').slideToggle(300);
});

Вот скрипт оно:
https://jsfiddle.net/kfgxv5un/

Answer 1

[vetsmen]

$('.nav_trigger').click(function(e){
  $('.nav_menu').stop().slideToggle(300);
});

Answer 2

[Алексей Скляров]

$(document).ready(function(){
  var touch 	= $('.mobile-bars');
  var menu 	= $('.mobile-menu');

  $(touch).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle();
  });

  $(window).resize(function(){
    var w = $(window).width();
    if(w > 991 && menu.is(':hidden')) {
      menu.removeAttr('style');
    }
  });

});

<div class="mobile-bars">
                <span></span>
                <span></span>
                <span></span>
 </div>
<ul class="mobile-menu" style="display: none;">
              <li><a href="/" title="Главная">Главная</a></li>
              <li><a href="/kak-zakazat/" title="Как заказать">Как заказать</a></li>
              <li><a href="/shop" title="Каталог">Каталог</a></li>
              <li><a href="/dostavka/" title="Доставка">Доставка</a></li>
              <li><a href="/o-kompanii/" title="О Компании">О Компании</a></li>
              <li><a href="/cart" title="Моя корзина">Моя корзина</a></li>
            </ul>

Comments

[Super Star]

$(window).resize у меня не было, но ведь никаких отличий от того что я написал в Вашем коде нет

Answer 3

[Александр Долголюк]

Анимацию для такого меню можно сделать с CSS-свойствами transition и transform.
Работать будет чётко.
Если исполнить хак с checkbox'ом, можно сделать вообще без js.
Вот пример: jsfiddle.net/paullferguson/Sv54G/3
Вот статья неплохая: https://css-tricks.com/the-checkbox-hack/#article-...