ホームページ > ウェブフロントエンド > jsチュートリアル > JSを使わずにメニューを開いたり閉じたりできるようにする

JSを使わずにメニューを開いたり閉じたりできるようにする

php中世界最好的语言
リリース: 2018-05-14 14:20:33
オリジナル
1123 人が閲覧しました

今回はJSを使わずにメニューを開いたり閉じたりする方法について注意事項をいくつか紹介します。実際の事例をいくつか紹介します。

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

HTML タグ

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

label

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

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

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

<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>
ログイン後にコピー

効果:

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い内容については、PHP 中国語に関する他の関連記事に注目してください。 Webサイト!

推奨読書:

nodejsログモジュールwinstonの使い方のまとめ


ES6に全画面スクロールプラグインを実装する手順の詳細な説明

以上がJSを使わずにメニューを開いたり閉じたりできるようにするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート