Question

我为小屏幕制作了一个汉堡包菜单。我有它适用于小屏幕，但如果在使屏幕变大之前菜单未打开，则菜单根本不显示。如果屏幕较大并刷新页面，则会显示菜单。如果屏幕到达媒体查询断点，我希望菜单实时切换。为了清楚起见，我希望在更大的屏幕上显示完整的菜单。

我正在使用JQuery来显示/隐藏菜单。

https://jsfiddle.net/fabfivefebby/87rywxxv/

var $hamburger = $('<button id="hamburger">&#9776;</button>');

$("header").append($hamburger);


// 2. toggle nav with icon

if ($("#hamburger").css("display") === "block") {

$("#nav_container").hide();

$hamburger.click(function(){

$("#nav_container").slideToggle("slow");
});

} else {
$("#nav_container").show();
}

提前谢谢大家！

Answer 1

我会在默认情况下显示汉堡包菜单（首先是移动设备）并隐藏nav_container。我在标记中有按钮。你真的不需要动态地附加它。您的媒体查询可以检测它何时变大（我将其设置为481px）并隐藏汉堡包并显示nav_container。你的jQuery只需要切换幻灯片。我在媒体查询nav_container显示中放了'！important'，这样如果它被jQuery隐藏并且你扩展到更大的显示，它就不会打开，因为它是内联的。您可以使用CSS隐藏/显示带有类的nav_container。而不是使用'！important'。

https://jsfiddle.net/wilchow/8pmLf8sn/7/

的CSS：

#hamburger {
    display: block;
    position: fixed;
    z-index: 10000;
    font-size: 1.5em;
    outline: 0;
    border: 0;
    width: 100%;
    padding-left: 90%;
    background-color: #FFFFF2;
}
#nav_container {
    display: none;
    top: 0;
    right: 0;
    padding-top: 30px;
    background-color: #FFFFF2;
}
#navbar li {
    width: 100%;
    display: inline-block;
    text-align: center;
    margin: 5px auto;
}
#navbar {
    font-size: 1.5em;
    width: 100vw;
}
@media only screen and (min-width: 481px) {
    #hamburger {
        display: none;
    }
    #nav_container {
        display: block!important;
    }
}

使用媒体查询和JQuery显示不同的菜单

1 个答案: