[英]Media queries don't work when menu is slidedown with Jquery
I created a navigationsbar. 我创建了一个导航栏。 If the display is smaller than
856px
, the design will change (media-queries). 如果显示小于
856px
,则设计将更改(媒体查询)。 Now you can press on Menü
and the navigation will slide down. 现在您可以按
Menü
,导航将向下滑动。 Look at the 3 steps here: 在这里查看3个步骤:
You can test it by yourself. 您可以自己测试。 Here is the link: mypage
这里是链接: mypage
My Code: 我的代码:
$("#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 Query: 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; } }
How can i get the normal navigationbar, if I press the x
? 如果按
x
,如何获得普通的导航x
?
As I told you in the comment it is related to jquery . 正如我在评论中告诉您的,它与jquery有关。 We will need to add resize event as follows:
我们将需要添加resize事件,如下所示:
$("#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');
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.