下拉式導航菜單

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