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

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

Когда дело доходит до 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>


javascript hamburger-menu portfolio
person Richard B    schedule 06.06.2019    source источник
comment
В настоящее время мне нужно щелкнуть ссылку, а затем закрыть меню вручную, снова нажав кнопку гамбургера. Я не могу это воспроизвести.   -  person Itang Sanjana    schedule 06.06.2019
comment
Упс, теперь должно работать. Спасибо.   -  person Richard B    schedule 06.06.2019

Ответы (2)


arrow_upward
1
arrow_downward

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

  <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>

затем просто удалите класс «открыть»,

    function hide() {
        let x = document.getElementById("wrapper");
        if (x.className === "nav open") {
            x.className = "nav";
        }
    }
person shahriar hasan    schedule 06.06.2019

arrow_upward
1
arrow_downward

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

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

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

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.

person showdev    schedule 06.06.2019
comment
showdev, это сработало! Я удалил e.preventDefault(); из последнего бита javascript, потому что он продолжал сбрасывать всю страницу (что, вероятно, не было очевидно, поскольку вы не могли видеть всю мою веб-страницу). Теперь отлично работает, спасибо за вклад! - person Richard B; 07.06.2019