Я хочу скрыть навигацию, когда нажимаю на элемент привязки - PullRequest
Новая
       39

Я хочу скрыть навигацию, когда нажимаю на элемент привязки

0 голосов
/ 19 апреля 2020

У меня проблема с панелью навигации, на самом деле она работает довольно хорошо, но я не знаю, как активировать : активный класс psydo для тега привязок при нажатии. Итак, вот мой html код и css, и главное, что я хочу сделать ...

Так вот, это моя html часть навигации 

<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 id="background" class="navigation__background">&nbsp;</div>

      <nav class="navigation__nav">
        <ul class="navigation__list">
          <li class="navigation__item"><a href="#" class="navigation__link">About Me</a></li>
          <li class="navigation__item"><a href="#" class="navigation__link">Skills</a></li>
          <li class="navigation__item"><a href="#projects" class="navigation__link">Projects</a></li>
          <li class="navigation__item"><a href="#" class="navigation__link">Contact Me</a></li>
          <li class="navigation__item"><a href="#" class="navigation__link">Message Me</a></li>
        </ul>
      </nav>

    </div>

Когда Я нажимаю кнопку гамбургера, появляется навигация, и когда я нажимаю раз (X), навигация закрывается. Также вот мой код css (SASS) 

.navigation {
  &__checkbox {
    display: none;
  }
  &__button {
    background-color: $color-white;
    height: 7rem;
    width: 7rem;
    position: fixed;
    top: 6rem;
    right: 6rem;
    border-radius: 50%;
    z-index: 2000;
    box-shadow: 0 1rem 3rem rgba($color-black, 0.1);
    text-align: center;
    cursor: pointer;

    @include respond(tab-port) {
      top: 4rem;
      right: 4rem;
    }

    @include respond(phone) {
      top: 3rem;
      right: 3rem;
    }
  }

  &__background {
    height: 6rem;
    width: 6rem;
    border-radius: 50%;
    position: fixed;
    top: 6.5rem;
    right: 6.5rem;
    background-image: radial-gradient($color-red, $color-black);
    z-index: 1000;
    transition: transform 0.8s cubic-bezier(0.12, 0.48, 0.49, -0.74);

    @include respond(tab-port) {
      top: 4.5rem;
      right: 4.5rem;
    }
    @include respond(phone) {
      top: 3.5rem;
      right: 3.5rem;
    }
  }

  &__nav {
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1500;

    opacity: 0;
    width: 0;
    transition: all 0.8s cubic-bezier(1, -0.69, 0.73, 1.95);
  }

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

  &__link {
    &:link,
    &:visited {
      display: inline-block;
      padding: 1rem 2rem;
      font-size: 3rem;
      font-weight: 300;
      color: $color-white;
      text-decoration: none;
      text-transform: uppercase;
      background-image: linear-gradient(
        120deg,
        transparent 0%,
        transparent 50%,
        $color-white 50%
      );
      background-size: 230%;
      transition: all 0.4s;
    }

    &:hover {
      background-position: 100%;
      color: $color-black;
      transform: translateX(-1rem);
    }
  }

  &__item {
    margin: 1rem;
  }

  &__checkbox:checked ~ &__background {
    transform: scale(80);
  }

  &__checkbox:checked ~ &__nav {
    opacity: 1;
    width: 100%;
  }

  //Icon
  &__icon {
    position: relative;
    margin-top: 3.4rem;

    &,
    &::before,
    &::after {
      width: 3rem;
      height: 2px;
      background-color: $color-grey-dark;
      display: inline-block;
    }

    &::before,
    &::after {
      content: "";
      position: absolute;
      left: 0;
      transition: all 0.3s;
    }

    &::before {
      top: -0.8rem;
    }

    &::after {
      top: 0.8rem;
    }
  }

  &__button:hover &__icon::before {
    top: -1rem;
  }

  &__button:hover &__icon::after {
    top: 1rem;
  }


  &__checkbox:checked + &__button &__icon {
    background-color: transparent;
  }

  &__checkbox:checked + &__button &__icon::before {
    top: 0;
    transform: rotate(135deg);
  }

  &__checkbox:checked + &__button &__icon::after {
    top: 0;
    transform: rotate(-135deg);
  }

}

Так что я хочу, чтобы то же самое происходило при нажатии одного из тег якоря, я пытался сделать то же самое, как здесь, когда флажок установлен, чтобы скрыть из виду. 

&__checkbox:checked ~ &__background {
    transform: scale(80);
  }

  &__checkbox:checked ~ &__nav {
    opacity: 1;
    width: 100%;
  }

Как я уже говорил, я пытался сделать что-то подобное, но это не сработало Итак, у вас есть идеи, как я могу это сделать? Заранее спасибо. 

&__link:active ~ &__background{
transform scale(1)
}

&__link:active ~ &__nav {
    opacity: 0;
    width: 0;
  }

кнопка гамбургера

навигация

Поэтому, когда я нажимаю кнопку гамбургера, появляется навигация и когда я нажимаю его снова, он закрывается. Я хочу сделать то же самое для тегов привязки, поэтому, когда я нажимаю один из тегов привязки, меню должно закрыться. Вот моя веб-страница, чтобы вы могли лучше проанализировать www.erolramacik.com

1 Ответ

0 голосов
/ 20 апреля 2020

Сделайте это с простой ванилью js

1) выберите все ссылки вашего меню 

let links = document.querySelectorAll('.navigation__link');

2) добавьте прослушиватель для щелчка и установите флажок состояния проверки на ложь, когда это произойдет 

links.forEach(link => { 
   link.addEventListener("click", () => { 
     document.querySelector('.navigation__checkbox').checked = false
   })
})
...