ホームページ  >  記事  >  ウェブフロントエンド  >  チェックボックスを使用して純粋な CSS ドロップダウンを実装する box_html/css_WEB-ITnose

チェックボックスを使用して純粋な CSS ドロップダウンを実装する box_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:38:411042ブラウズ

この例では、純粋な CSS で作成されたドロップダウン ボックスが表示されます。主に HTML 要素のチェックボックスと CSS3 セレクターを使用し、JavaScript は使用しません。例は次のとおりです:

Click to Expand

  • Link One
  • Link Two
  • Link Three
  • Link Four
  • 実装プロセス:

    HTML構造

    <div class="dropdown">    <input type="checkbox" id="checkbox_toggle">    <label for="checkbox_toggle">Click to Expand</label>    <ul>        <li><a href="#">Link One</a></li>        <li><a href="#">Link Two</a></li>        <li><a href="#">Link Three</a></li>        <li><a href="#">Link Four</a></li>    </ul></div>

    #div はコンテナとして機能しますすべてのタグをラップするには

    #input[type=checked] タグはチェックされた属性とチェックされていない属性を識別するために使用され、要素は非表示になります

    #label タグはドロップダウン メニューをトリガーするために使用されます

    #ul にチェックボックス ハックを追加しますメニュー リスト

    必要なのはチェックボックスだけです。 要素の疑似クラス セレクター: selected は、要素のチェック状態を検出し、ラベル タグを通じてチェックボックスの未チェック状態とチェック済み状態をトリガーできます。まずチェックボックスを非表示にします

    input[type=checkbox]{    display: none;}

    同時に、デフォルトでは UL も非表示にし、メニューがトリガーされた場合にのみ表示されます。

    ul{    display: none;}

    :checked セレクターと隣接する兄弟セレクターを組み合わせて、対応するメニューの表示状態を制御します~。

    input[type=checkbox]:checked ~ ul {    display: block}

    チェックボックスが選択されている場合、ドロップダウン メニューが表示され、それ以外の場合は非表示になります。

    デモ:

    demo.zip

    声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。