@marfushjke

Как сделать так, чтобы при нажатии на ссылку в меню-гамбургере, меню закрывалось обратно?

<div class="menu-wrap">
  <input type="checkbox" class="toggler">
  <div class="hamburger"><div></div></div>
  <div class="menu">
  <div>
    <div>
      <ul>
        <li><a href="ссылка">Кнопка</a></li>
        <li><a href="ссылка">Кнопка</a></li>
        <li><a href="ссылка">Кнопка</a></li>
        <li><a href="ссылка">Кнопка</a></li>
      </ul>
    </div>
    </div>
  </div>
</div>
<style>
:root {
  --primary-color: rgba(64, 41, 176, 0.75);
--overlay-color: linear-gradient(rgba(64, 41, 176, 0.85), rgba(118, 33, 192, 0.85));
  --menu-speed: 0.75s;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
   line-height: 1.2;
}
.menu-wrap {
  position: fixed;
  top: 10px;
  right: 15px;
  z-index: 1;
}
.menu-wrap .toggler {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  cursor: pointer;
  width: 50px;
  height: 50px;
  opacity: 0;
}
.menu-wrap .hamburger {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 44px;
  height: 44px;
  padding: 1rem;
  background: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15%;
 background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.4) 100%), #F7B11E;
background-blend-mode: soft-light, normal;
border: 0.871287px solid rgba(255, 255, 255, 0.16);
box-sizing: border-box;
box-shadow: 4.35644px 4.35644px 8.71287px #A6ABBD;
border-radius: 5.80858px;
}
.menu-wrap .hamburger > div {
  position: relative;
  width: 100%;
  height: 2px;
  background-color: #303234;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}
.menu-wrap .hamburger > div:before,
.menu-wrap .hamburger > div:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -6px;
  width: 100%;
  height: 2px;
  background: inherit;
}
.menu-wrap .hamburger > div:after {
  top: 6px;
}
.menu-wrap .toggler:checked + .hamburger > div {
  transform: rotate(135deg);
}
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
  top: 0;
  transform: rotate(90deg);
}
.menu-wrap .toggler:checked:hover + .hamburger > div {
  transform: rotate(225deg);
}
.menu-wrap .toggler:checked ~ .menu{
  visibility: visible;
}
.menu-wrap .toggler:checked ~ .menu > div{
  transform: scale(1);
  transition-duration: var(--menu-speed);
}
.menu-wrap .toggler:checked ~ .menu > div > div{
  opacity: 1;
  transition: opacity .4s ease;
}
.menu-wrap .menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  overflow: hidden;
  display: flex; 
  align-items: center;
  justify-content: center;
}
.menu-wrap .menu > div{
  background: var(--overlay-color);
  border-radius: 50%;
  width: 200vw;
  height: 200vw;
  display:flex;
  flex: none;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: all .4s ease;
}
.menu-wrap .menu > div > div{
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity .4s ease;
}
.menu-wrap .menu > div > div > ul > li{
  list-style: none;
  color: #fff;
  font-size: 1.5rem;
  padding: 1rem;
}
.menu-wrap .menu > div > div > ul > li > a{
  color: inherit;
  text-decoration: none;
  transition: color .4s ease;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script type="text/javascript">
      $(function(){
              $("a[href^='#']").click(function(){
                      var _href = $(this).attr("href");
                      $("html, body").animate({scrollTop: $(_href).offset().top+"px"});
                      $('.toggler').prop("checked", false);
                      return true;
              });
      });
      </script>
      <script> 
      $('a[data-target^="anchor"]').on('click', function () {
            $('.hamburger-toggler').toggler('hide');
            $a = $($(this).attr('href'));  
            return false;
        });
</script>
  • Вопрос задан
  • 49 просмотров
Решения вопроса 1
@alekcena
В попытках обрести навыки и умения
marfushjke,
Самоё лёгкое решение.
Для этой реализации мы на родительский блок вешаем класс(когда меню активно(active) и неактивно()).
document.querySelector('Наша кнопка').onclick = function(){
 document.querySelector('Родительский блок менюшки').classList.add('Класс который нужно добавить');
}

Сначала рекомендую поиграться с js посмотреть как он работает в этом случае и потом уже перейти стилям.
Нам нужно правильно сделать стили.
1. Стиль неактивного меню.
2. Стиль активного меню.

Логика работы. Кликаем на наш гамбургер.
Он добавляет для родителя класс
<div class="наши_классы active">.
Важные заметки
querySelector('div.parentBlock') - ищет так же как стили css.
Чтобы искать по класу нужно querySelector('.myClass')....
classList.(add/remove/toggle) добавить/удалить/ если нет добавит. если есть уберёт.

Ещё не рекомендую писать на jquery на начальном этапе.
Раньше это сильно ускоряло работу тк как это было прорывным в качестве скорости и возможностей. В современном js знать jquery для больших библиотек надо. Но Приоритетнее писать на чистом js.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы