Как закрыть меню CSS при переходе по ссылкам с JS?

Question

Итак, я сделал чистое меню CSS, и все выглядит так, как я хочу, кроме как при нажатии на ссылки. В моем макете одной страницы при щелчке по ссылкам происходит переход к разделу страницы, но при нажатии на ссылку он просто плавно прокручивает раздел, и меню остается видимым. Я прочитал несколько похожих вопросов, и ни одно из решений не помогло мне. Я бы предпочел использовать JavaScript, а не jQuery.

Мой веб-сайт все еще работает; проверить это, чтобы действительно увидеть, что происходит на мобильном телефоне https://www.itsalaam.com/

Вот мой код:

/* NAVIGATION */
.header {
    width: 100%;
    position: fixed;
    top: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.7), transparent);
    z-index: 999;
    overflow: hidden;
    /* transition: background .2s ease-out; */
}
.header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}
.header ul a {
    display: block;
    padding: 15px;
    text-align: center;
    color: rgb(224, 224, 224);
    font-size: 1.7rem;
}
.header ul a:hover {
    color: #fff;
}
.header .logo {
    float: left;
    display: block;
    padding-top: 15px;
    padding-left: 30px;
}
.header .logo img {
    width: 50px;
    transition: width .5s ease;
}
.header .menu {
    clear: both;
    float: right;
    max-height: 0;
    text-align: center;
    width: 100%;
    transition: max-height .2s ease-out;
    transition: background 0.2s ease-out;
}
.header .menu-icon {
    padding: 28px 20px;
    position: relative;
    float: right;
    cursor: pointer;
    /*menu-icon serves as the parent element of the span nav-icon the is nested within. so the span is the child element*/
}
.header .menu-icon .nav-icon {
    /*creates the middle bar of the nav-icon*/
    background: #fff;
    display: block;
    height: 2px;
    width: 18px;
    position: relative;
    transition: background .2s ease-out;
}
.header .menu-icon .nav-icon:after,
.header .menu-icon .nav-icon:before {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
}
.header .menu-icon .nav-icon:before {
    top: 5px;
}
.header .menu-icon .nav-icon:after {
    top: -5px;
}
.header .menu-btn {
    display: none;
}
.header .menu-btn:checked~.menu {
    /* the ~ selects the next sibling  */
    max-height: 100vh;
    background: #000;
    z-index: 99;
    transition: background 0.2s ease-out;
    /*because the max height was set to 0 on the .menu once the menu-btn is checked, the for attribute must match the id of the input checkbox. so when you click the label it targets the check box, which was set to display none.*/
}
/* the X for closing */
.header .menu-btn:checked~.menu-icon .nav-icon {
    background: transparent;
}
/*middle line disappears*/
.header .menu-btn:checked~.menu-icon .nav-icon:before {
    transform: rotate(-45deg);
    top: 0;
}
.header .menu-btn:checked~.menu-icon .nav-icon:after {
    transform: rotate(45deg);
    top: 0;
}

<header class="header">
      <a href="index.html" class="logo"><img src="/img/globeWireframe.png" alt="salaam" /></a>
      <input type="checkbox" class="menu-btn" id="menu-btn" />
      <label for="menu-btn" class="menu-icon"><span class="nav-icon"></span></label>
      <ul class="menu">
        <li><a href="#" class="current">Home</a></li>
        <li><a href="#about">About</a></li>
        <li>
          <a href="#" type="button" data-toggle="modal" data-target="#exampleModal">Resume</a>
        </li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </header>
    
  

Answer 1

Использовать Javascript:
1. Установите флажок, чтобы использовать его позже.
2. Получить все ссылки в меню.
3. Добавьте прослушиватель событий для каждой ссылки, чтобы снять флажок при нажатии зная, что меню отображается только тогда, когда флажок установлен.

// Run once everything is loaded
window.onload = function() {
    // Get the checkbox
    let chk = document.getElementById('menu-btn');
    // Get all menu links
    let menuLinks = document.querySelectorAll('.menu li a');
    // Loop on links
    menuLinks.forEach(function(item) {
        // Add event listener to each links
        item.addEventListener('click', function() {
            // When link is clicked, uncheck the checkbox to hide menu
            chk.checked=false;
        });
    });
}

/* NAVIGATION */
.header {
    width: 100%;
    position: fixed;
    top: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.7), transparent);
    z-index: 999;
    overflow: hidden;
    /* transition: background .2s ease-out; */
}
.header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}
.header ul a {
    display: block;
    padding: 15px;
    text-align: center;
    color: rgb(224, 224, 224);
    font-size: 1.7rem;
}
.header ul a:hover {
    color: #fff;
}
.header .logo {
    float: left;
    display: block;
    padding-top: 15px;
    padding-left: 30px;
}
.header .logo img {
    width: 50px;
    transition: width .5s ease;
}
.header .menu {
    clear: both;
    float: right;
    max-height: 0;
    text-align: center;
    width: 100%;
    transition: max-height .2s ease-out;
    transition: background 0.2s ease-out;
}
.header .menu-icon {
    padding: 28px 20px;
    position: relative;
    float: right;
    cursor: pointer;
    /*menu-icon serves as the parent element of the span nav-icon the is nested within. so the span is the child element*/
}
.header .menu-icon .nav-icon {
    /*creates the middle bar of the nav-icon*/
    background: #fff;
    display: block;
    height: 2px;
    width: 18px;
    position: relative;
    transition: background .2s ease-out;
}
.header .menu-icon .nav-icon:after,
.header .menu-icon .nav-icon:before {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
}
.header .menu-icon .nav-icon:before {
    top: 5px;
}
.header .menu-icon .nav-icon:after {
    top: -5px;
}
.header .menu-btn {
    display: none;
}
.header .menu-btn:checked~.menu {
    /* the ~ selects the next sibling  */
    max-height: 100vh;
    background: #000;
    z-index: 99;
    transition: background 0.2s ease-out;
    /*because the max height was set to 0 on the .menu once the menu-btn is checked, the for attribute must match the id of the input checkbox. so when you click the label it targets the check box, which was set to display none.*/
}
/* the X for closing */
.header .menu-btn:checked~.menu-icon .nav-icon {
    background: transparent;
}
/*middle line disappears*/
.header .menu-btn:checked~.menu-icon .nav-icon:before {
    transform: rotate(-45deg);
    top: 0;
}
.header .menu-btn:checked~.menu-icon .nav-icon:after {
    transform: rotate(45deg);
    top: 0;
}

<header class="header">
      <a href="index.html" class="logo"><img src="/img/globeWireframe.png" alt="salaam" /></a>
      <input type="checkbox" class="menu-btn" id="menu-btn" />
      <label for="menu-btn" class="menu-icon"><span class="nav-icon"></span></label>
      <ul class="menu">
        <li><a href="#" class="current">Home</a></li>
        <li><a href="#about">About</a></li>
        <li>
          <a href="#" type="button" data-toggle="modal" data-target="#exampleModal">Resume</a>
        </li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </header>