幻灯片效果导航菜单

Question

这就是我正在工作的网站。

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

我已经编码了导航菜单与基本的JavaScript和CSS的工作，但我希望它是正确的，与一个滑动下拉效果。

我也使用了2个导航菜单来尝试创建这个效果。我知道我不应该用这种方式编写代码，但这是我能让它工作的唯一方法。我真的需要一些帮助来解决这个问题。

除了单击菜单按钮时的幻灯片效果外，该站点目前可以完成我想要它做的事情。

如果有人能帮我解决这个问题，我将不胜感激。

下面是我希望我的菜单做什么的一个例子。

http://responsivemobilemenu.com/en/

Answer 1

在这里，悬停在菜单上，它在滑动，然后再次点击它，它的幻灯片，up.This只是一个例子。你也可以通过“点击”来完成。

$(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");
    }

    });

})