首頁  >  文章  >  web前端  >  不用JS做出選單開啟與關閉

不用JS做出選單開啟與關閉

php中世界最好的语言
php中世界最好的语言原創
2018-05-14 14:20:331084瀏覽

這次帶給大家不用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中文網其它相關文章!

推薦閱讀:

nodejs日誌模組winston使用方法總結

#ES6實作全螢幕捲動外掛程式插件步驟詳解

以上是不用JS做出選單開啟與關閉的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn