html css javascript我需要我的导航窗口在用户单击链接后立即关闭

debugcn 发表于 Dev

泰勒·德登

我有一个充当导航标签的标签，标签ul li嵌入了一个充当导航标签的div中。

当用户单击汉堡包按钮时，背景颜色覆盖了覆盖所有内容的整个页面，并且一直保持这种状态，直到用户单击x将其关闭。用户单击href或按钮后，爆炸的div（导航）

我对某些链接没有问题，但是当链接指向这样的ID时

当前的拍卖会变得很棘手，特别是如果用户两次单击当前的拍卖，它就会一直盯着我

这是代码和它的外观的一些图片

<style>

.navigation-checkbox {
    display: none;
}

.navigation-button {
    background-color: #fff;
    height: 7rem;
    width: 7rem;
    position: fixed;
    top: 7.5rem;
    right: 2rem;
    border-radius: 50%;
    z-index: 2000;
    box-shadow: 0 1rem 3rem rgba(#000, .1);
    text-align: center;
    cursor: pointer;
}

.navigation-background {
    height: 6rem;
    width: 6rem;
    border-radius: 50%;
    position: fixed;
    top: 8rem;
    right: 2rem;
    background-image: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 114, 121, 1) 35%,
    rgba(0, 212, 255, 0.5709286277602523) 100%);
    z-index: 1000;
    transition: transform .8s cubic-bezier(.86, 0, .07, 1);
}

.navigation-nav {
    height: 100vh;
    width: 0;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1500;
    opacity: 0;
    width: 0;
    transition: all .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.navigation-list {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    list-style: none;
    text-align: center;
    width: 100%;
}



.navigation-item {
    margin: 1rem;
}

.navigation-item {
    word-spacing: 1rem;
}

.navigation-link:link,
.navigation-link:visited {
    display: inline-block;
    font-size: 3rem;
    font-weight: 300;
    padding: 1rem 2rem;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
    background-size: 270%;
    transition: all .4s;
}

.navigation-link:link > span,
.navigation-link:visited > span {
    margin-right: 1.5rem;
    display: inline-block;
}

.navigation-link:hover,
.navigation-link:active {
    background-position: 100%;
    color: #8794FA;
    transform: translateX(1rem);
}

.navigation-checkbox:checked ~ .navigation-background {
    transform: scale(80);
}

.navigation-checkbox:checked ~ .navigation-nav {
    opacity: 1;
    width: 100%;
}

/*-------------------icon --------------------*/

.navigation-icon {
    position: relative;
    margin-top: 3.5rem;
}

.navigation-icon::before,
.navigation-icon::after {
    content: "";
    position: absolute;
    left: 0;
    transition: all .2s;
}

.navigation-icon::before {
    top: -.8rem;
}

.navigation-icon::after {
    top: .8rem;
}

.navigation-icon,
.navigation-icon::before,
.navigation-icon::after {
    width: 3rem;
    height: 2px;
    background-color: #333;
    display: inline-block
}

.navigation-button:hover > .navigation-icon::before {
    top: -1rem;
}

.navigation-button:hover > .navigation-icon::after {
    top: 1rem;
}

/*------------------ icon appear and disappear -------*/

.navigation-checkbox:checked + .navigation-button > .navigation-icon {
    background-color: transparent;
}

.navigation-checkbox:checked + .navigation-button > .navigation-icon::before {
    top: 0;
    transform: rotate(135deg);
}

.navigation-checkbox:checked + .navigation-button > .navigation-icon::after {
    top: 0;
    transform: rotate(-135deg);
}


[![enter image description here][1]][1]

</style>

<body>
<nav th:fragment="nav.html">
    <!--   NAVIGATION-->
    <div class="navigation">
        <input type="checkbox" class="navigation-checkbox" id="navi-toggle">
        <label for="navi-toggle" class="navigation-button">
            <span class="navigation-icon">&nbsp;</span>
        </label>
        <div class="navigation-background">&nbsp;</div>
        <nav class="navigation-nav">
            <ul class="navigation-list">
                <li class="navigation-item"><a class="navigation-link" href="/#first-auction">current auctions</a>
                </li>
                <li class="navigation-item"><a class="navigation-link" href="#">past auctions</a>
                </li>
                <li class="navigation-item"><a href="https://server22.maxanet.com/cgi-bin/mnregister.cgi?restaubid"
                                               class="navigation-link">login</a></li>
                <li class="navigation-item"><a href="https://server22.maxanet.com/cgi-bin/mnregister.cgi?restaubid"
                                               class="navigation-link">register</a></li>
                <li class="navigation-item"><a href="https://server22.maxanet.com/cgi-bin/mnregister.cgi?restaubid"
                                               class="navigation-link">update bidder's info</a></li>
                <li class="navigation-item"><a th:href="@{/about}" class="navigation-link">about</a></li>
                <li class="navigation-item"><a th:href="@{/contact}" class="navigation-link">contact</a></li>
                <li class="navigation-item"><a th:href="@{/locations}" class="navigation-link">location</a></li>
                <li class="navigation-item"><a th:href="@{/referrals}" class="navigation-link">referrals</a></li>
                <li class="navigation-item"><a th:href="@{/services}" class="navigation-link">buy new at near auction prices</a></li>
            </ul>
        </nav>
    </div>
</nav>
</body>

在此处输入图片说明

拉德雷克斯

一个快速简便的解决方案将是一个添加eventListener到您的nav。您还可以将其附加到document自身并使用Event Delegation方法。我navigationItems向您添加了id，nav以使该元素更容易使用，然后在该元素上附加一个事件侦听器。单击<a>标签时，将checkbox.checked值设置为false，菜单应关闭。

document.getElementById('navigationItems').addEventListener('click', evt => {
  if (evt.target.nodeName === 'A') { // Check if <a> tag is clicked
    document.getElementById('navi-toggle').checked = false;
  }
});

<div class="navigation">
  <input type="checkbox" class="navigation-checkbox" id="navi-toggle">
  <label for="navi-toggle" class="navigation-button">
    <span class="navigation-icon">&nbsp;</span>
  </label>
  <div class="navigation-background">&nbsp;</div>

  <nav class="navigation-nav" id="navigationItems">
    <ul class="navigation-list">
      <li class="navigation-item"><a class="navigation-link" href="/#first-auction">current auctions</a></li>
      <li class="navigation-item"><a class="navigation-link" href="#">past auctions</a></li>
    </ul>
  </nav>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。