下拉导航菜单

Question

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

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

感谢。

Answer 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;
    }
}

Answer 2

呼叫＆＃34; habmubrger菜单＆＃34;。 它是CSS和JS的结合。 你可以找到它http://getbootstrap.com/。 或者你可以自己构建它。这很简单

同时检查媒体查询