Question

这是我正在努力的网站..

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

我已经将导航菜单编码为使用基本的JavaScript和CSS，但我希望它可以通过下滑效果正确完成。

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

当点击菜单按钮时，除了幻灯片效果之外，网站目前正在执行我想要的操作。

如果有人可以帮助我，我会非常感激。

这是我希望我的菜单做的一个例子。

http://responsivemobilemenu.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");
    }

    });

})

幻灯片效果导航菜单

2 个答案: