溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
我在寫有菜單欄的網頁時，基本都會用響應式設計來適配移動端，例如把不重要的菜單選項隱藏，或者創建一個菜單按鈕來控制的菜單的打開和關閉之類的。而我之前一直是使用JavaScript來實現菜單的打開和關閉的，但最近在網上看到有人使用CSS和HTML來實現這一功能，讓我真正的感受到手里只要有一把錘，什么都可以做釘子。
實現之前先來看一下HTML標簽和輸入類型：
label
<label> 標簽為 input 元素定義標注（標記）。
label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。
<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同。
Input Type: checkbox
<input type="checkbox"> 定義復選框。
復選框允許用戶在有限數量的選項中選擇零個或多個選項。
下面是demo的代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>menu demo</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" > <style> .demo { text-align: center; } /* 點擊checkbox時，菜單打開或顯示 */ #menu-checkbox:checked ~ .nav { display: none; } /* 隱藏checkbox的復選框 */ #menu-checkbox { display: none; } .nav ul{ list-style: none; margin: 0; padding: 0; font-size: 20px; } .glyphicon-menu-hamburger { font-size: 30px; margin-top: 50px; } </style> </head> <body> <div class="demo"> <!-- label綁定checkbox --> <label for="menu-checkbox"><span class="glyphicon glyphicon-menu-hamburger"></label> <input id="menu-checkbox" type="checkbox"> <div class="nav"> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> </ul> </div> </div> </body> </html>
效果：
點擊上面的hamburger圖標，菜單就會顯示和隱藏。
雖然是很簡單的一個東西，不過它對于我而言更多的是一種啟發。
以上所述是小編給大家介紹的不使用JavaScript實現菜單的打開和關閉效果，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
