Отзывчивое меню с CSS3

Question

У меня есть отзывчивое меню, которое я пытаюсь создать с помощью переходов. Я создал один через jsFiddle который можно найти здесь:

http://jsfiddle.net/FN37X/

JS Я использую:

$(document).ready(function(){ 
$(".menu-button").click(function() { 
    if ($(".menu").hasClass('close')) { 
      $(".menu").removeClass('close').addClass('open'); 
     } 
    else if ($(".menu").hasClass('open')) { 
      $(".menu").removeClass('open').addClass('close'); 
     } 
}); 
}); 

Мой вопрос,
Можно ли иметь это меню, без кратковременного перехода, который появляется при изменении размера ширины окна.

Моя цель состоит в том, чтобы иметь адаптивное меню, которое скользит вниз без использования CSS важна! (Я нашел с помощью toggleSlide требуется это?

Answer 1

Да, я думаю slideToggle() ваш лучший выбор, так что вы можете также удалить CSS transition что влияет на изменение размеров окна.

В вашем CSS удалить оба .open{} и .close{} стилей, то на вашем .menu добавить display:none и top:50px (высота черного .box-menu).

Тогда ваш сценарий будет:

$(document).ready(function(){ 
    $(".menu-button").click(function(){ 
     $('.menu').slideToggle(); 
    }); 
}); 

Смотрите эту jsfiddle

Answer 2

Это быстрое решение

$(window).on("resize",function(event){ 
    $(".menu").css("display","none"); 

}) 
$(window).on("debouncedresize",function(event){ 
    $(".menu").css("display","block"); 

}) 

просто включить сценарий изменения размера дребезга в документе: https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js

его взял меня немного, чтобы найти решение для debounced resize.

http://jsfiddle.net/prollygeek/FN37X/5/