如何在菜單較小時添加一個說菜單的按鈕？

我有一個CSS響應菜單，我做了。我想添加一個按鈕，當屏幕較小時顯示菜單。這是我的鏈接my current code pen 這裏是在計算器代碼片段如何在菜單較小時添加一個說菜單的按鈕？

.nav ul { 
 
    list-style: none; 
 
    background-color: #00FFFF; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.nav li { 
 
    font-family: Georgia; 
 
    font-size: 1.2em; 
 
    line-height: 40px; 
 
    height: 40px; 
 
    border-bottom: 1px solid #ffffff; 
 
} 
 
    
 
.nav a { 
 
    text-decoration: none; 
 
    color: #000000; 
 
    display: block; 
 
    transition: .3s background-color; 
 
} 
 
    
 
.nav a:hover { 
 
    background-color: #036; 
 
    color: #ffffff; 
 
} 
 
    
 
@media screen and (min-width: 600px) { 
 
    .nav li { 
 
    width: 120px; 
 
    border-bottom: none; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    font-size: 1.4em; 
 
    } 
 
    
 
    /* Option 1 - Display Inline */ 
 
    .nav li { 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
    } 
 
    
 
    /* Options 2 - Float 
 
    .nav li { 
 
    float: left; 
 
    } 
 
    .nav ul { 
 
    overflow: auto; 
 
    width: 600px; 
 
    margin: 0 auto; 
 
    } 
 
    .nav { 
 
    background-color: ffffff; 
 
    } 
 
    */ 
 
}

<div class="nav"> 
 
     <ul> 
 
     <li><a href="index.html">Home</a></li> 
 
     <li><a href="resume.html">Resume</a></li> 
 
     <li><a href="aboutme.html">Biography</a></li> 
 
     <li><a href="contact.html">Contact</a></li> 
 
     </ul> 
 
    </div>

來源

2016-05-06 mlegg

代碼你是說像一個Hamburger Menu？

你需要爲此使用JavaScript。我不認爲有一種方法可以隱藏和顯示按鈕單擊純CSS的菜單。我可能是錯的。

來源

2016-05-06 20:32:50

像這些http://www.w3schools.com/css/css3_buttons.asp我也看到了這一點，但無法弄清楚如何將其添加到我的菜單中https://codepen.io/derekmorash/pen/XddZJY – mlegg

好的。那麼你可以添加隱藏和顯示按鈕的媒體查詢。例如 @ media screen和（最大寬度：500px）按鈕{ display：block; } } 然後默認隱藏按鈕。爲了使按鈕隱藏並顯示菜單，您仍然需要使用JavaScript。我希望有所幫助。讓我知道如果它。祝你好運！ –

我不太清楚你的意思。我已經使用了17年的HTML，因爲幾乎從一開始：P和顯然也是多年的CSS。我仍然自己學習JavaScript。我通常在那裏使用代碼片段來處理我需要使用的東西。 – mlegg

如何在菜單較小時添加一個說菜單的按鈕？

回答

相關問題