html - JSなしでクリック可能なcssメニュー

Question

ホバーではなくクリックで動作する CSS を使用した HTML5 メニューを作成したいと考えています。JSで行われたWeb上の例を見ました。JSなしでそれができるかどうか疑問に思っていました。おそらく1つの方法は、追加することです

 <input type='checkbox' /> 

各親の前に、サブアイテムを表示するようにチェックされているかどうかに応じてどう思いますか?

Answer 1

:checked

はい、チェックボックスを使用して実行できますが、現在はあまりサポートされていません。とともに、次の兄弟+および一般的な兄弟~セレクターを使用し:checkedます。

jsフィドル

HTML

<input id="menu-button" type='checkbox' />
<label for="menu-button"></label>
<ul id="menu">
    <li>Menu item 1</li>
    <li>Menu item 2</li>
    <li>Menu item 3</li>
</ul>

CSS

/* hide the checkbox */
 #menu-button {
    position:absolute;
    left:-9999px;
    top:-9999px;
}
#menu-button + label:after {
    display:block;
    content:"v";
}
#menu-button:checked + label:after {
    content:"^";
}
#menu {
    display:none;
}
#menu-button:checked ~ #menu {
    display:block;
}

:target

もう 1 つの方法は、<a>タグとを使用することです:targetが、これもあまりサポートされていません。

jsフィドル

HTML

<a href="#menu">Show menu</a>
<div id="menu">
    <ul>
        <li>Menu item 1</li>
        <li>Menu item 2</li>
        <li>Menu item 3</li>
    </ul>
    <a href="#">Hide menu</a>
</div>

CSS

#menu {
    display:none;
}
#menu:target {
    display:block;
}