我目前正在开发一个带有水平导航菜单的响应式网站,并切换到可移动的可点击菜单图标 . 该菜单在桌面分辨率下看起来很好,在移动设备上运行良好
如果我将浏览器缩小到我的分辨率断点之后,我的问题就出现了 . 它切换到移动菜单图标并隐藏我的标准菜单 . 如果我单击图标,菜单会显示出来 . 再次点击它就消失了 . 一切都好 . 当我向后缩放浏览器时,如果我将移动设备切换为可见,如果我没有首先激活切换,但是如果我将其激活,则会显示原始菜单,然后关闭移动菜单,然后缩小,标准菜单保持切换隐藏的方面,永远不会再出现 .
据我所知,当我缩小到我的媒体查询断点时,我需要jquery强制切换回可见 . 但我不知道该怎么做,我没有在网上找到这个问题 .
$("#menu-icon").on("click", function(){
$("#nav").slideToggle();
$(this).toggleClass("active");
});
是我正在使用的功能:
<nav id="nav-wrap">
<div id="menu-icon"><img src="../img/menu.png"></div>
<ul id="nav">
<li><a href="default.htm">Home</a></li>
<li><a href="obstacles.htm">Obstacles</a></li>
<li><a href="location.htm">Location</a></li>
<li><a href="register.htm">Register</a></li>
<li><a href="sponsor.htm">Sponsor</a></li>
<li><a href="volunteer.htm">Volunteer</a></li>
<li><a href="faqs.htm">FAQs/Documents</a></li>
</ul>
</nav>
是我的导航菜单和:
#nav {
text-align:center;
font-size:1em;
text-transform:uppercase;
font-weight:900;
margin:1em auto;
display:block;
}
#nav li {
display:inline;
text-align:center;
margin:1em 2em;
}
#menu-icon {
display:none;
}
@media screen and (max-width:600px) {
#menu-icon {
width:30px;
height:30px;
cursor:pointer;
display:block;
margin:0em auto 1em auto;
}
#nav {
clear:both;
z-index:10000;
padding:5px;
background:#000;
border:solid 1px #f1f1eb;
display:none;
}
}
编辑:我忘了添加 . 我尝试通过使用具有不同ID的单独导航来解决这个问题,该导航在缩小时会隐藏,但是存在相反的问题,其中一半的时间我缩放并且有2个导航菜单,因为jquery#导航将被切换
1 回答
使用window.resize函数检查视口并添加
$("#nav").show();
JS
小提琴
http://jsfiddle.net/5DQs8/8/