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

この例では、純粋な 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