单击页面时使导航覆盖消失

Question

我正在使用 CSS 导航覆盖菜单，代码如下

当你点击导航菜单select你想去哪个页面时，叠加层会停留，不会消失..

如果我 link 它到另一个 html 页面它工作正常，但因为我的所有页面都在一个页面上，所以我 link 通过 href 将它 div 喜欢 (href="#about")

知道如何在您单击导航页面后隐藏叠加菜单吗？

非常感谢任何帮助，谢谢

    <nav id="menu">

        <input type="checkbox" id="toggle-nav"/>
        <label id="toggle-nav-label" for="toggle-nav"></label>

        <div class="box">
    <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#projects">Work</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
        </div>
    </nav>



a { text-decoration: none; }
    a:hover { text-decoration: underline; }

    li { list-style: none; }


    #menu .box {
        position: fixed;
        text-align: center;
        overflow: hidden;
        z-index: -1;
        opacity: 0;
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
        background: black;
        -webkit-transition: all 0.3s ease-in-out; 
        -moz-transition: all 0.3s ease-in-out; 
        -o-transition: all 0.3s ease-in-out; 
        transition: all 0.3s ease-in-out;
    }

    #menu ul {
        position: relative;
        top: 20%;
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -ms-transform: scale(2);
        transform: scale(2);
        -webkit-transition: all 0.3s ease-in-out; 
        -moz-transition: all 0.3s ease-in-out; 
        -o-transition: all 0.3s ease-in-out; 
        transition: all 0.3s ease-in-out;
    }

    #menu li { 
        margin: 60px;
    }

    #menu li a {
        border-radius: 3px;
        padding: 15px;
        border: 1px solid transparent;
        text-decoration: none;
        font-family: 'Montserrat', sans-serif;
        font-size: 18px;
        color: #fff;
        -webkit-transition: all 0.2s ease-in-out; 
        -moz-transition: all 0.2s ease-in-out; 
        -o-transition: all 0.2s ease-in-out; 
        transition: all 0.2s ease-in-out;
    }

    #menu li a:hover { border-color: #fff; }

    #menu li a i { 
        margin-right: 5px; 
        font-size: 24px;
    }

    #toggle-nav-label {
        color: black;
        text-align: center;
        line-height: 30px;
        font-size: 30px;
        display: block;
        cursor: pointer;
        position: relative;
        z-index: 500;
        width: 30px;
        height: 30px;
        border-radius: 5px;
    }

    #toggle-nav { display: none; }

    #toggle-nav:checked ~ .box { 
        opacity: 1;
        z-index: 400;
    }

    #toggle-nav:checked ~ .box ul {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    #toggle-nav:checked ~ #toggle-nav-label { 
        color: white;
        position: fixed;
    }

Answer 1

最简单的答案是使用 javascript 简单地取消选中复选框...但这有点违背了复选框 hack 的目的，不是吗。除了简单地让用户再次单击标签以关闭菜单之外，我想不出其他方法。有点破坏你想要的效果。如果没有更好的办法，这里有一个快速 javascript 解决方案：

window.onload = function() {

 // Add a listener for any clicks on the menu
 document.getElementById('menu').addEventListener('click', function(edit) {
    var targetName = event.target.tagName;

    // Make sure that the element being clicked is a link or an icon
    if (targetName !== 'A' && targetName !== 'I') {
      return;
    }
    // Uncheck the checkbox
    document.getElementById('toggle-nav').checked = false;
  });
}

还有一个codepen。如果您希望允许用户通过单击任意位置来关闭菜单，您可以将 && targetName !== 'DIV' 添加到 if 语句。希望它能有所帮助，或者有人想出更好的方法，因为就我个人而言，我很想找到一种只用 CSS.

的方法

编辑

修复了 JS 代码以使用 targetName。添加了对图标的支持。修复了 codepen 演示以匹配 OP 演示。

编辑 2

发现跨浏览器错误。通过在函数参数中包含事件来修复 Firefox。

单击页面时使导航覆盖消失

Making navigation overlay disappear when pages clicked

html

css

drop-down-menu

overlay

nav

编辑

编辑 2