下拉式导航菜单

Question

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

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

谢谢。

Answer 1

这是调用“habmubrger菜单”。 它是CSS和JS的组合。 你可以找到它http://getbootstrap.com/。 或者你可以自己构建它。这是简单

同时检查媒体查询

Answer 2

你必须添加媒体查询本 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; 
    } 
}