Как удалить меню гамбургера после щелчка мышью или ссылки на странице

Question

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

Когда дело доходит до JavaScript, я довольно новичок.По сути, это единственное, что осталось для запуска моего портфолио.

function myFunction() {
  let x = document.getElementById("myNav");
  if (x.className === "nav") {
    x.className += " open";
  } else {
    x.className = "nav";
  }
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

#topper {
  display: grid;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "header" "navigation";
}

.nav {
  font-family: 'Markazi Text', sans;
  padding-top: 10px;
  position: fixed;
  width: 100%;
  display: grid;
  text-align: center;
  grid-template-columns: 15% auto 0 0 0 0 0;
  grid-template-areas: "ham . navPhotos navVideos navGraphic navWeb navAbout";
}

.nav.open {
  height: 100%;
  background-color: white;
  align-content: start;
  grid-template-columns: 15% 70% 15%;
  grid-template-areas: "ham navPhotos ." ". navPhotos ." ". navVideos ." ". navGraphic ." ". navWeb ." ". navAbout .";
}

#ham {
  grid-area: ham;
}

#navPhotos {
  grid-area: navPhotos;
}

#navVideos {
  grid-area: navVideos;
}

#navGraphic {
  grid-area: navGraphic;
}

#navWeb {
  grid-area: navWeb;
}

#navAbout {
  grid-area: navAbout;
}

@media only screen and (min-width: 601px) {
  #topper {
    width: 100%;
    background-color: white;
    display: grid;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "header" "navigation";
  }
  .indexgallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #ham {
    display: none;
  }
  .nav {
    padding-top: 0;
    position: static;
    width: 600px;
    margin: 0 auto;
    background-color: white;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-template-areas: "navPhotos navVideos navGraphic navWeb navAbout";
  }
  .nav.open {
    padding-top: 0;
    position: static;
    width: 600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-template-areas: "navPhotos navVideos navGraphic navWeb navAbout";
  }
  #myNav {
    grid-area: navigation;
  }
}

.empty {
  height: 100px;
  color: rgba(0, 0, 0, 0);
}

<div class="nav" id="myNav">
  <div id="ham"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></div>
  <div id="navPhotos"><a href="#photo">Photography</a></div>
  <div id="navVideos"><a href="#video">Videography</a></div>
  <div id="navGraphic"><a href="#dig">Graphic</a></div>
  <div id="navWeb"><a href="#web">Web Design</a></div>
  <div id="navAbout"><a href="#abt">About</a></div>
</div>

Answer 1

Вы можете обернуть пункты меню в обертку следующим образом:

  <div id='wrapper' onclick='hide()'>
    <div id="navPhotos"><a href="#photo">Photography</a></div>
    <div id="navVideos"><a href="#video">Videography</a></div>
    <div id="navGraphic"><a href="#dig">Graphic</a></div>
    <div id="navWeb"><a href="#web">Web Design</a></div>
    <div id="navAbout"><a href="#abt">About</a></div>
  </div>

, затем просто удалить класс 'open',

    function hide() {
        let x = document.getElementById("wrapper");
        if (x.className === "nav open") {
            x.className = "nav";
        }
    }

Answer 2

Вот один из методов.

Функция переключения принимает два параметра: элемент для переключения и требуемое состояние. Если состояние истинно и навигация закрыта, навигация будет открыта. Если состояние ложно ИЛИ навигация открыта, навигация закроется.

Я привязал слушателя событий к документу, который закрывает навигацию. Я также предотвратил всплывание клика на гамбургере до документа с помощью stopPropagation () . Таким образом, нажатие на гамбургер также не вызовет щелчка на документе.

var nav = document.getElementById("myNav");
var ham = document.getElementById("ham");

function toggleNav(x, t) {
  if (t && x.className === "nav") {
    x.className += " open";
  } else {
    x.className = "nav";
  }
}

ham.addEventListener('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  toggleNav(nav, true);
});

document.addEventListener('click', function(e) {
  toggleNav(nav, false);
});

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

#topper {
  display: grid;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "header" "navigation";
}

.nav {
  font-family: 'Markazi Text', sans;
  padding-top: 10px;
  position: fixed;
  width: 100%;
  display: grid;
  text-align: center;
  grid-template-columns: 15% auto 0 0 0 0 0;
  grid-template-areas: "ham . navPhotos navVideos navGraphic navWeb navAbout";
}

.nav.open {
  height: 100%;
  background-color: white;
  align-content: start;
  grid-template-columns: 15% 70% 15%;
  grid-template-areas: "ham navPhotos ." ". navPhotos ." ". navVideos ." ". navGraphic ." ". navWeb ." ". navAbout .";
}

#ham {
  grid-area: ham;
}

#navPhotos {
  grid-area: navPhotos;
}

#navVideos {
  grid-area: navVideos;
}

#navGraphic {
  grid-area: navGraphic;
}

#navWeb {
  grid-area: navWeb;
}

#navAbout {
  grid-area: navAbout;
}

@media only screen and (min-width: 601px) {
  #topper {
    width: 100%;
    background-color: white;
    display: grid;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "header" "navigation";
  }
  .indexgallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #ham {
    display: none;
  }
  .nav {
    padding-top: 0;
    position: static;
    width: 600px;
    margin: 0 auto;
    background-color: white;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-template-areas: "navPhotos navVideos navGraphic navWeb navAbout";
  }
  .nav.open {
    padding-top: 0;
    position: static;
    width: 600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-template-areas: "navPhotos navVideos navGraphic navWeb navAbout";
  }
  #myNav {
    grid-area: navigation;
  }
}

.empty {
  height: 100px;
  color: rgba(0, 0, 0, 0);
}

<div class="nav" id="myNav">
  <div id="ham"><a href="#">&#9776;</a></div>
  <div id="navPhotos"><a href="#photo">Photography</a></div>
  <div id="navVideos"><a href="#video">Videography</a></div>
  <div id="navGraphic"><a href="#dig">Graphic</a></div>
  <div id="navWeb"><a href="#web">Web Design</a></div>
  <div id="navAbout"><a href="#abt">About</a></div>
</div>

Вы также можете рассмотреть возможность использования classList.