Html 我如何创建一个全屏点击目标来使用CSS-only导航菜单：target？

虽然这个问题似乎表达得不清楚，因此没有得到任何答案，但与之相关

我希望在mobile first设计上使用渐进增强功能创建导航菜单，因此

：hover

不是一个选项。第一步是使用

：target

伪选择器实现无JavaScript导航下拉菜单。稍后我将在此基础上添加一个JavaScript解决方案菜单将位于公共网站上，需要对禁用JS的用户提供支持。

打开菜单没有问题——我的问题是何时关闭菜单。唯一的方法是从URL散列中删除id

例如，单击以下链接时会出现该菜单：

，该链接将URL更改为

www.something.com/#nav

。为了隐藏菜单，我需要从URL中删除

#nav

。解决方案是添加另一个更改哈希的链接：

用户希望单击菜单之外的任何位置也会关闭菜单。想到的第一个解决方案是使用一个小小的z索引魔术，在我的菜单下面创建一个全屏锚定标记

对其他解决方案的建议也持开放态度

HTML:

---

您可以使用

复选框

并通过

：checked

选择器显示和隐藏导航

JSFiddle-and HTML:

<header id="top">
    <label for="toggle-1">Menu</label>
    <input type="checkbox" id="toggle-1">
    <ul id="nav">
        <li><a href="#top">Close Menu</a></li>
        <li><a href="#">Nav Item 1</a></li>
        <li><a href="#">Nav Item 2</a></li>
        <li><a href="#">Nav Item 3</a></li>
    </ul>
</header>

input[type=checkbox] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
input[type=checkbox]:checked ~ ul#nav {
    display: block;
}
#nav {
    display: none;
}
label {
    cursor: pointer;
}

---

您反对使用：hover解决方案吗？

：hover

在移动设备上不可用，因此它会使导航菜单无法访问。我将把这个要求添加到问题中！啊，那就有道理了。这是一个很好的问题。我从来没有考虑过手机上禁用JS。你想过“复选框黑客”吗？我的建议是使用复选框或收音机，而不是使用：target@Roy查看JSFIDLE演示-这非常有效！如果我试图显示/隐藏的元素不是直接同级元素，有没有办法使用复选框hack方法？@Roy它只适用于所有css选择器。请查看Mozilla MDN上的css选择器列表-

<header id="top">
    <label for="toggle-1">Menu</label>
    <input type="checkbox" id="toggle-1">
    <ul id="nav">
        <li><a href="#top">Close Menu</a></li>
        <li><a href="#">Nav Item 1</a></li>
        <li><a href="#">Nav Item 2</a></li>
        <li><a href="#">Nav Item 3</a></li>
    </ul>
</header>

input[type=checkbox] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
input[type=checkbox]:checked ~ ul#nav {
    display: block;
}
#nav {
    display: none;
}
label {
    cursor: pointer;
}