幻燈片效果導航菜單

Question

這是我正在工作的網站。

http://jasalounge.com/test/home/

我已經將導航菜單編碼為可與基本JavaScript和CSS一起使用，但是我希望它可以通過滑落效果正確完成。

我還使用2個導航菜單來嘗試創建此效果。 我知道我不必這樣編碼，但這是我可以使用它的唯一方法。 我真的需要一些幫助來解決此問題。

除了單擊菜單按鈕時的滑動效果外，該網站當前正在執行我想要的操作。

如果有人可以幫助我，我將不勝感激。

這是我希望菜單執行的示例。

http://sensitivemobilemenu.com/en/

Answer 1

鼠標懸停在菜單上時，它向下滑動，再次單擊它時，它向上滑動。這只是一個示例。 您也可以在“點擊”上執行此操作。

$(function(){
  $('.dropdown-1').hide();
  $('#menu').hover(function(){
        $('.dropdown-1').slideDown('medium');
  }, function(){
        $('.dropdown-1').slideUp('medium');
  });
})

http://jsfiddle.net/gurPn/77/

Answer 2

這是我的問題的答案。

$(function(){
if(window.innerWidth <= 760) {
   $('#headerNav').hide();
}


    $("#menuIcon").click(function(){
     $("#headerNav").slideToggle("fast");
     });

    $(window).resize(function(){

    if(window.innerWidth > 760) {
    $("#headerNav").removeAttr("style");
    }

    });

})