Question

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

当您单击导航菜单并选择要转到叠加的页面时，保持不会消失..

如果我将它链接到另一个html页面它工作正常，但因为我在一个页面上有我的所有页面我通过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的复选框...但是这有点违背复选框黑客的目的不是这样。除了简单地让用户再次点击标签以关闭菜单之外，我想不出另一种方式。有点破坏了你想要的效果。如果没有更好的方法出现在这里是一个快速的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来做到这一点的方法。

修改

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

编辑2

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

单击页面时，导航叠加消失

1 个答案:

修改

编辑2