這次帶給大家不用JS做出選單開啟與關閉,不用JS做出選單開啟與關閉的注意事項有哪些,以下就是實戰案例,一起來看一下。
我在寫有選單列的網頁時,基本上都會用響應式設計來適配行動端,例如把不重要的選單選項隱藏,或是建立一個選單按鈕來控制的選單的開啟和關閉之類的。而我之前一直是使用JavaScript來實現選單的開啟和關閉的,但最近在網路上看到有人使用CSS和HTML來實現這一功能,讓我真正的感受到手裡只要有一把錘,什麼都可以做釘子。
實作之前先來看看HTML標籤和輸入類型:
#label
label 元素不會向使用者呈現任何特殊效果。不過,它為滑鼠使用者改進了可用性。如果您在 label 元素內點擊文本,就會觸發此控制項。是說,當使用者選擇該標籤時,瀏覽器就會自動將焦點轉到和標籤相關的表單控制項。
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> <p class="demo"> <!-- label绑定checkbox --> <label for="menu-checkbox"><span class="glyphicon glyphicon-menu-hamburger"></label> <input id="menu-checkbox" type="checkbox"> <p class="nav"> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> </ul> </p> </p> </body> </html>
效果:
#相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是不用JS做出選單開啟與關閉的詳細內容。更多資訊請關注PHP中文網其他相關文章!