不用JS實作選單開啟關閉
- php中世界最好的语言原創
- 2018-06-01 13:52:541658瀏覽
這次帶給大家不用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>
效果：
#點擊上面的hamburger圖標，選單就會顯示和隱藏。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是不用JS實作選單開啟關閉的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn