Question

当我的窗口达到670px时，导航菜单会显示一个css类display：none;。然后会出现一个下拉图标。下拉图标有一个slideToggle，显示ul li导航菜单，并且可以使用。然而，一旦窗口再次膨胀，就无处可寻找。如果有人能提供帮助，那就太棒了。

这是代码。

<style>
body{
    margin:0px; 
    padding:0px;
}
.menu-trigger img{display: none;}
.header_background{
    background-image: url('backgrounddd.jpg');
    position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.clearfixone{
    margin: 0px;
    padding:0px;
    width:100%;
    overflow: hidden;
    border-bottom:1px solid black;

}
.divone{
    max-width: 995px;
    margin-left: auto;
    margin-right: auto;
    padding-top:0px;
    padding-bottom:0px;
    margin-top: 0px;
    margin-bottom: 0px;
    border:1px solid red;
    overflow: hidden;


}
#logo{
    height:90px;
    padding:0px;
    margin: 0px;
    margin-top:5px;
}

.nav-menu ul li{
    list-style: none;
    display: inline-block;
    float: right;
    width: 120px;
    padding: 0px;
    margin:0px;
    text-align: center;
    border-right:2px solid #bfcec7;
    line-height: 30px;
}
li#middle{
    padding-left: 10px;
    padding-right:10px;
}
div.nav-expanded{
    display: block;
}
@media screen and (max-width:990px) {
    .nav-menu ul{
        padding:0px;
        width: 100%;
    }
    .nav-menu ul li{
    background-color:rgba(0, 0,0, 0.7);
    width: 100%;
    padding: 0px;
    margin:0px;
    text-align: center;
    border-right:none;
    border-top:1px solid white;
    padding-top:10px;
    padding-bottom: 10px;
    float: none;


}
.menu-trigger img{
    height: 25px;
    float: right;
    padding-right: 15px;
    padding-top: 15px;
    display:block;

}
.nav-menu ul{
    display: none;

}
div.nav-expanded{
    display: block;
}

}

</style>
<div class="clearfixone">
          <div class="divone">
          <span class="menu-trigger"><img class="dropdown"src="http://i.imgur.com/Y9huMMG.png"></span>
<div class="nav-menu">
    <ul class="menu">
            <li class="extra"><a href="#">Services Offered</a></li>
                <li class="extra"><a href="#">Learn More </a></li>
                <li><a href="#">About Us</a></li>
                <li id="middle"><a href="#">Request a Quote</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
</div>
    </div></div>

<script>
jQuery(document).ready(function() {

    jQuery(".menu-trigger").click(function() {

        jQuery(".nav-menu, ul").slideToggle(400, function() {
            jQuery(this).toggleClass("nav-expanded").css('display', 'content');
        });

    });

});
</script>

Answer 1

尝试将具有最小宽度的媒体查询放在相同的屏幕宽度，以将显示：块样式重新应用回导航菜单。

@media screen and (min-width:990px){
    .nav-menu ul { display: block !important; }
}

@media screen and (max-width:990px) { 
    .nav-menu ul { display: none; }
}

扩展浏览器后无法显示响应式导航菜单

1 个答案: