我创建了一个fiddle 链接 来阐述问题:
我有个桌面和移动端菜单,手机屏幕宽度小于或等于480px时会激活移动端菜单。如果您打开fiddle,调整窗口大小直到汉堡图标出现,点击“运行”,然后点击汉堡菜单中的任何链接,菜单将像应该一样折叠。
如果您将窗口大小重新调整回到全屏状态,则由于在ul元素上设置了display:none的媒体查询,因此菜单文本将消失。这是为了让菜单不在移动模式下永久显示。
这里是否需要注意什么?浏览器不应检测是否已回到全屏状态,从而忽略媒体查询并将ul元素恢复为默认的display:inline吗?
这也会发生在纵向和横向之间的较小设备上,这真的是我的关注点。
当然,任何帮助都将不胜感激。
更新
我在这里创建了一个新的fiddle 链接,它几乎可以正常工作,但仍存在一个问题:调整回全屏后,单击链接(ul)会导致菜单向上滑动,但这只有在小于480px时才应该发生。 再次感谢Chandra Shekhar提供的一些脚本。
<nav>
<a class="fa fa-bars"></a>
<ul class="menu">
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
</ul>
</nav>
nav {
width:100%;
position:fixed;
top:0;
text-align:center;
z-index:100;
background:grey;
padding:10px 0;
}
nav ul {
list-style:none;
margin:0;
padding:0;
}
nav ul li {
display:inline;
padding:0 12px;
}
.fa-bars {
display:none;
}
@media only screen and (max-width:480px) {
nav ul {
width:100%;
position:absolute;
top:37px;
display:none;
}
nav ul li {
display:block;
border-top:1px solid #868686;
background:grey;
padding:10px;
}
nav ul li a {
padding:12px 18px;
}
nav ul li:first-child {
border-top:none;
}
.fa-bars {
display:inline;
}
$(document).ready(function () {
if ( $(window).width() > 480) {}
else {
$(".fa-bars").click(function (event) {
event.stopPropagation();
$(".menu").slideToggle("slow");
});
$(document).click(function () {
$(".menu").slideUp("slow");
});
}
});