Question

与StackOverflow question: CSS only menu close on target相关，虽然问题似乎表达不清楚，因此没有得到任何答案。

我希望在移动优先设计上使用渐进增强功能创建导航菜单，因此:hover不是一个选项。第一步是使用:target伪选择器实现JavaScript免费导航下拉菜单。我稍后会在此基础上添加JavaScript解决方案。 该菜单位于公共网站上，需要支持已禁用JS的用户。

打开菜单没问题 - 我的问题是在关闭菜单的时候出现的。执行此操作的唯一方法是从URL哈希中删除id。

例如，当您点击以下链接时会显示该菜单：<a href="#nav">Menu</a>会将网址更改为www.something.com/#nav。为了隐藏菜单，我需要从网址中删除#nav。解决方案是添加另一个更改哈希值的链接：<a href="#top">Close Menu</a>。

用户希望点击菜单外的任何地方也会关闭菜单。想到的第一个解决方案是使用一点z-index魔法在菜单下方创建一个全屏锚标记。

也可以提供其他解决方案的建议。

HTML：

<header id="top">
    <a href="#nav" class="toggle-nav">Menu</a>

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

SCSS：

#nav {
    position: relative;
    z-index: 2;

    &:not(:target) {
        display: none;
    }

    &:target {
        display: block;
    }

}

Answer 1

您可以使用checkbox并显示＆amp;通过:checked选择器隐藏导航。

JSFiddle - DEMO 1和DEMO 2

<强> 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>

<强> CSS：

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

如何创建全屏单击目标以使用仅限CSS的导航菜单：target？

1 个答案:

JSFiddle - DEMO 1和DEMO 2