html - 没有 JS 的可点击 CSS 菜单

Question

我想用 CSS 创建一个 HTML5 菜单，它可以通过单击而不是悬停来工作。我在网上看到了使用 JS 完成的示例。我想知道是否可以在没有 JS 的情况下做到这一点。一种方法可能是添加

 <input type='checkbox' /> 

在每个父母之前，根据它是否检查来显示子项目你怎么看？

Answer 1

:checked

是的，您可以使用复选框来做到这一点，但目前它并没有得到很好的支持。它使用下一个兄弟+和通用兄弟~选择器以及:checked.

jsFiddle

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

另一种方法是使用<a>标签和:target，这也不是很好支持。

jsFiddle

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;
}