下拉导航菜单答案

【问题标题】：Drop-down navigation menu下拉导航菜单
【发布时间】：2017-04-13 21:04:31
【问题描述】：

我见过一些网站，如果我从移动设备连接，导航栏会自动变为下拉菜单。这可以防止导航栏显示得太小，或者显示在屏幕的一侧，或者显示在两行而不是一行。

现在，下拉菜单似乎总是一个带有三个水平线的按钮，并且在具有此功能的不同网站上感觉非常一致。出于这个原因，我想知道这是否是 CSS 中的一些内置功能，它会在适当的时候自动将导航转换为下拉菜单。如果是这样，有人可以向我指出有关如何将其合并到我自己的网站中的信息吗？

谢谢。

【问题讨论】：

这可以是一个Bootstrap导航栏。 Bootstrap navbar reference
用户引导或创建自己的
jsfiddle.net/wexd3spp/19

标签： html css

【解决方案1】：

您已为此添加媒体查询 HTML

<img class="show-menu" src="http://localhost/wp-content/themes/themename/images/menu.png" alt="">
<nav class="main-nav">  
<div class="menu-primary-menu-container">
<ul id="menu-primary-menu" class="menu">
<li ><a href="#">menu1</a></li>
<li><a href="#>menu1</a></li>
<li ><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
<li ><a href="#">menu1</a></li>

</ul></div>                                      
</nav>

媒体查询 CSS

    @media(max-width:640px){
    .show-menu {
        display: block;
    }
    .main-nav {
        left: 0;
        padding-top: 15px;
        position: absolute;
        top: 10px;
        width: 100%;
    }
    .menu-primary-menu-container {
        display: none;
    }
    .main-nav:hover .menu-primary-menu-container {
        display: block;
    }
    }

@media(min-width:641px){
.show-menu {
        display: none;
    }
}

【讨论】：

【解决方案2】：

它被称为“habmubrger 菜单”。它是CSS和JS的结合。你可以找到它http://getbootstrap.com/。或者您可以自己构建它。很简单

同时检查媒体查询

【讨论】：