Question

我遇到了设计汉堡包菜单以及通过jQuery显示汉堡包菜单的问题。

这是我到目前为止的jQuery：

$(document).ready(function(){

    $('.hamburger-box').on('click', function(){
        $('.navigation').toggleClass('burger-nav');
    });

});

这是一个开始，但我不完全确定如何继续这样做。在我让课程可见之后，我无法得到任何东西。我很确定我把课程放在了不正确的地方，我没有适当考虑这个间距。

我在这里有一个JSFiddle，代码我正在使用：（放大浏览器，直到你看到汉堡包菜单）

https://jsfiddle.net/5vvtek5f/

这是我在汉堡包图标上点击时出现的汉堡包菜单： https://jsfiddle.net/xnpa2n6w/

欢迎任何帮助！

Answer 1

https://jsfiddle.net/5vvtek5f/1/

您的ul显示：无，但您在导航中应用了一个类。

@media (max-width: 414px){
    .navigation > ul{
        display: none;
    } 
}

所以我做的是添加这个：

nav.navigation {
    display: inline-block;
}
nav.navigation.burger-nav {
    display: inline-block;
}

@media (max-width: 414px){
    nav.navigation {
        display: none;
    }
}

当屏幕尺寸低于414px时隐藏导航。并在点击汉堡包按钮时启用/禁用它。

jQuery汉堡包菜单没有出现

1 个答案: