Question

我正在使用以下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中的错误还是我的代码错了？有什么想法吗？

提前致谢

Answer 1

好的，我弄清楚自己发生了什么事。要在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;
    }
}

Chrome媒体查询行为

1 个答案: