JS を使用せずにメニューを開閉する-jsチュートリアル-php.cn

JS を使用せずにメニューを開閉する

php中世界最好的语言

リリース： 2018-06-01 13:52:54

オリジナル

1711 人が閲覧しました

今回はJSを使わないメニューの開閉とJSを使わないメニューの開閉を実現するための注意事項を紹介します。以下は実践的なケースですので見てみましょう。

メニューバーのあるWebページを書くときは、重要でないメニューオプションを非表示にしたり、メニューの開閉を制御するメニューボタンを作成したりするなど、基本的にモバイル端末に合わせたレスポンシブデザインを使用しています。今までメニューの開閉にはJavaScriptを使っていましたが、最近ネット上でCSSとHTMLを使ってこの機能を実装している人を見て、ハンマーさえあれば何でもできるんだと実感しました。 . 爪を作ります。実装する前に、

HTML タグ

と入力タイプを見てみましょう:

label

ラベルは入力要素のラベル (マーカー) を定義します。

label 要素はユーザーに特別な効果を与えません。ただし、マウスユーザーにとっては使いやすさが向上します。このコントロールは、ラベル要素内のテキストをクリックするとトリガーされます。つまり、ユーザーがラベルを選択すると、ブラウザは自動的にラベルに関連するフォームコントロールにフォーカスを向けます。

ラベルの for 属性は、関連要素の id 属性と同じである必要があります。

入力タイプ: チェックボックス

チェックボックスを定義します。

<input type="checkbox"> チェックボックスを使用すると、ユーザーは限られた数のオプションから 0 個以上のオプションを選択できます。

以下はデモコードです:

<!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>

ログイン後にコピー

効果:

上のハンバーガーアイコンをクリックすると、メニューが表示されたり非表示になったりします。