您好我正在制作我的第一个网站,并试图获得一些应该非常简单的工作,但我不能。
所以我有一个基本的导航菜单,它浮动在标题的右侧。当屏幕宽度小于650px时,我希望菜单消失并显示汉堡包(这是我很棒的)
问题是当我在汉堡包上调用切换功能时,当我将窗口调整为>时它不会刷新。 650.我已经尝试了所有的东西,我确信必须有一个简单的方法,这是我的所有代码:
HTML:
<header>
<div id="headLogo">
<a href="clhome.php"><img src="images/primLogo2.png"
alt="Imagehere"></a>
</div>
<div id="primHamMenu">
<a href="#" id="primHamLink">
<span></span>
<span></span>
<span></span>
</a>
</div>
<div id="headNav">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Lingerie</a></li>
<li><a href="#">Swim</a></li>
<li><a href="#">Print</a></li>
<li><a href="#">Technical</a></li>
</ul>
</nav>
</div>
</header>
CSS:
#primHamMenu{
width: 4em;
margin: 0 auto;
margin-bottom: 1em;
/*display: none;*/
}
#primHamMenu a span{
width: 100%;
border-bottom: 0.16em solid #ffffff;
display: block;
padding: 0.41em;
}
/*----------Prim Nav media queries-------*/
@media screen and (max-width: 920px){
#headLogo{
float: none;
width: 50%;
margin: 0 auto;
position: relative;
margin-bottom: 0;
padding-bottom: 0;
}
#headNav{
float: none;
width: 100%;
margin: 0 auto;
position: relative;
top: auto;
right: auto;
margin-top: 2em;
}
#headNav ul{
width: 90%;
}
}
@media screen and (max-width: 650px){
#headLogo{
width: 75%;
}
#headNav{
transform: none;
/*display: none;*/
}
#headNav ul{
flex-direction: column;
justify-content: space-around;
text-align: center;
}
#headNav ul li{
margin: 1em 0 1em 0;
}
#primHamMenu{
/*display: block;*/
}
JQuery的:
$(document).ready(function () {
var width = $(window).width();
$(window).resize(function(){
if(width > 650){
$("#primHamMenu").hide();
$("#headNav").show();
}else{
$("#primHamMenu").show();
$("#headNav").hide();
}
})
// toogle headNav
$("#primHamMenu").click(function(){
$("#headNav").toggle();
});
})
除了切换功能
外,一切都很有效任何帮助将不胜感激。 感谢
答案 0 :(得分:1)
使用matchMedia以正确的方式执行此操作。
$(document).ready(function () {
var mq = window.matchMedia("(max-width: 630px)");
mq.addListener(WidthChange);
WidthChange(mq);
function WidthChange(mq) {
if (mq.matches) {
$("#primHamMenu").show();
$("#headNav").hide();
} else {
$("#primHamMenu").hide();
$("#headNav").show();
}
}
$("#primHamMenu").click(function(){
$("#headNav").toggle();
});
});
&#13;
#primHamMenu{
width: 4em;
margin: 0 auto;
margin-bottom: 1em;
/*display: none;*/
}
#primHamMenu a span{
width: 100%;
border-bottom: 0.16em solid #ffffff;
display: block;
padding: 0.41em;
}
/*----------Prim Nav media queries-------*/
@media screen and (max-width: 920px){
#headLogo{
float: none;
width: 50%;
margin: 0 auto;
position: relative;
margin-bottom: 0;
padding-bottom: 0;
}
#headNav{
float: none;
width: 100%;
margin: 0 auto;
position: relative;
top: auto;
right: auto;
margin-top: 2em;
}
#headNav ul{
width: 90%;
}
}
@media screen and (max-width: 650px){
#headLogo{
width: 75%;
}
#headNav{
transform: none;
/*display: none;*/
}
#headNav ul{
flex-direction: column;
justify-content: space-around;
text-align: center;
}
#headNav ul li{
margin: 1em 0 1em 0;
}
#primHamMenu{
/*display: block;*/
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="headLogo">
<a href="clhome.php"><img src="images/primLogo2.png"
alt="Imagehere"></a>
</div>
<div id="primHamMenu">
<a href="#" id="primHamLink">
<span></span>
<span></span>
<span></span>
</a>
</div>
<div id="headNav">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Lingerie</a></li>
<li><a href="#">Swim</a></li>
<li><a href="#">Print</a></li>
<li><a href="#">Technical</a></li>
</ul>
</nav>
</div>
</header>
&#13;