我创建了一个导航栏。如果显示小于 856px
,设计将会改变(媒体查询)。现在您可以按 Menü
,导航将向下滑动。看看这里的 3 个步骤:
你可以自己测试一下。这是链接:mypage
我的代码:
$("#nav_menu_header").click(function(){
if($(".navbar_li").is(':visible')){
$(".navbar_li").slideToggle("slow");
}
else{
$(".navbar_li").slideDown("slow");
}
})
nav{
width: 100%;
background-color: rgb(25, 25, 25);
border-bottom: 4px solid rgb(255, 125, 0);
position: fixed;
top: 0;
left: 0;
}
.navbar_ul{
list-style-type: none;
width: 1100px;
margin: 0 auto;
}
.navbar_li{
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 30px;
}
.navbar_a{
color: white;
text-decoration: none;
transition: color 0.2s ease-in-out 0s;
}
.navbar_a:hover{
color: rgb(255, 125, 0);
}
#nav_menu_header{
display: none;
color: white;
text-decoration: none;
padding: 10px 0px;
width: 100%;
padding-left: 30px;
border-bottom: 4px solid rgb(255, 125, 0);
}
.symbol{
margin-right: 10px;
}
#nav_menu_header:hover{
cursor: pointer;
}
<nav>
<a id="nav_menu_header"><i class="fa fa-home symbol"></i>Menü</a>
<ul class="navbar_ul">
<li class="navbar_li"><a class="navbar_a" href="index.php?content=create_tutorial">Tutorial erstellen</a></li>
<li class="navbar_li"><a class="navbar_a" href="index.php?content=all_tutorial">Alle Tutorials</a></li>
<li class="navbar_li"><a class="navbar_a" href="#">Suche</a></li>
</ul>
</nav>
Mediq 查询:
@media only screen and (max-width : 855px) {
nav{
border: none;
}
.navbar_ul{
list-style-type: none;
}
.navbar_li{
display: none;
margin: 0px;
padding: 0px;
border-bottom: 4px solid rgb(255, 125, 0);
}
.navbar_a{
color: white;
text-decoration: none;
padding: 10px 0px;
width: 100%;
display: block;
padding-left: 30px;
transition: color 0.2s ease-in-out 0s;
}
.navbar_a:hover{
color: rgb(255, 125, 0);
}
#nav_menu_header{
display: block;
}
}
如果我按 x
,我怎样才能获得正常的导航栏?
最佳答案
正如我在评论中告诉您的那样,它与 jquery 有关.我们需要按如下方式添加调整大小事件:
$("#nav_menu_header").click(function(){
if($(".navbar_li").is(':visible')){
$(".navbar_li").css('display','none');
}
else{
$(".navbar_li").css('display','block');
}
});
$(window).resize(function(){
if($("#nav_menu_header").is(':visible')){
$(".navbar_li").css('display','none');
}
else{
$(".navbar_li").css('display','inline-block');
}
});
检查这个 DEMO
关于javascript - 使用 Jquery 滑动菜单时媒体查询不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30267893/