我使用以下 HTML 和 CSS 代码在移动设备上显示切换按钮。单击此按钮可打开(或关闭)带有高度过渡的导航菜单:
HTML
<nav id="site-navigation" class="navigation-main">
<h1 class="menu-toggle">Menú</h1>
<div class="menu-container">
<ul class="nav-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</nav>
CSS
.menu-toggle {
display: none;
}
.navigation-main {
clear: both;
display: block;
font-size: 14px;
text-transform: uppercase;
}
.navigation-main ul {
list-style: none;
margin: 0;
padding-left: 0;
}
@media only screen and (min-width: 50px) and (max-width: 767px) {
.menu-toggle {
display: block;
}
.navigation-main.toggled .nav-menu {
max-height: 500px;
}
.navigation-main .nav-menu {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.5s;
-moz-transition: max-height 0.5s;
transition: max-height 0.5s;
}
}
我已经检查了 IE 和 Firefox 中的代码,它按预期工作。在 Chrome 中也是如此,但有一个问题:导航菜单在重新加载页面时暂时显示不到 1 秒。
这是 Chrome 中的错误还是我的代码有误?有什么想法吗?
提前致谢
最佳答案
好吧,我自己弄明白是怎么回事了。为了在 Chrome 中实现这一点,我必须使用相同的类 (.navigation-main .nav-menu) 在 CSS 文件的媒体查询内部和外部引用导航菜单。
.menu-toggle {
display: none;
}
.navigation-main {
clear: both;
display: block;
font-size: 14px;
text-transform: uppercase;
}
.navigation-main .nav-menu {
list-style: none;
margin: 0;
padding-left: 0;
}
@media only screen and (min-width: 50px) and (max-width: 767px) {
.menu-toggle {
display: block;
}
.navigation-main.toggled .nav-menu {
max-height: 500px;
}
.navigation-main .nav-menu {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.5s;
-moz-transition: max-height 0.5s;
transition: max-height 0.5s;
}
}
关于css - Chrome 媒体查询行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21160126/