Блог

Я пытаюсь активировать переход при нажатии на меню burger. Мой javascript и css работают для всего, кроме создания медленного выпадающего перехода навигации сверху вниз.

Попытка найти ответ в Интернете привела меня ко многим различным способам создания перехода. Итак, я запутался в этом, если есть стандартный способ сделать это, пожалуйста, помогите мне. Не пытаюсь быть ленивым, но я видел 5 разных способов. Не уверен, на что мне нужно настроить таргетинг в моем css. Спасибо

 <header>
  <button class="hamburger hamburger--squeeze" type="button">
    <span class="hamburger-box">
        <span class="hamburger-inner"></span>
    </span>
  </button>
  <img class="header-logo" src="/logo/piancavallo-logo.svg" alt="">
  <nav>
    <ul class="nav-links">
      <li><a href="index.html">home</a></li>
      <li><a href="shop.html">shop</a></li>
      <li><a href="sport.html">sport</a></li>
      <li><a href="read.html">read</a></li>
      <li><a href="about.html">about</a></li>
    </ul>
  </nav>
  <img class="search-icon" src="/logo/search-icon.svg" alt="">
  <img class="shopping-cart" src="/logo/shopping-cart.svg" alt="">
</header>
 

 nav {
  position: absolute;
  text-align: left;
  top: 100%;
  left: 0;
}
nav .nav-links {
  display: none;
  background-color: orange;
  font-size: 1.4rem;
  position: absolute;
  width: 100vw;
}
nav .nav-active {
  display: block;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  margin: 5px;
  padding: 5px;
}
nav a {
  text-decoration: none;
  color: green;
  font-weight: 700;
}
nav ul {
  -webkit-transition: height 1s ease-in;
  transition: height 1s ease-in;
}
 

 const revealNav = () => {
  const hamburger = document.querySelector('.hamburger');
  const nav = document.querySelector('.nav-links');

  hamburger.addEventListener('click', () => {
    hamburger.classList.toggle('is-active');
  }, false);

  hamburger.addEventListener('click', () => {
    nav.classList.toggle('nav-active');
  });
}

revealNav();
 

Насколько я знаю, не существует стандартного или лучшего способа сделать это, это во многом зависит от визуального эффекта, которого вы пытаетесь достичь.

Здесь у меня есть решение, и я удалил большую часть CSS, которая не нужна для перехода сверху / снизу.

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

 const revealNav = () => {
  const hamburger = document.querySelector('.hamburger');
  const nav = document.querySelector('.nav-links');

  hamburger.addEventListener('click', () => {
    nav.classList.toggle('is-active');
  });
}

revealNav(); 

 nav {
  overflow: hidden;
}

.nav-links {
  opacity: 1; /* only to show when class is added */
  background-color: orange;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 1s;
  transform: translateY(-100%);
}

.nav-links.is-active {
  opacity: 1; /* only to show when class is added */
  transform: translateY(0);
} 

 <header>
  <button class="hamburger hamburger--squeeze" type="button">
    <span class="hamburger-box">
        <span class="hamburger-inner">hamburger</span>
    </span>
  </button>
  <nav>
    <ul class="nav-links">
      <li><a href="index.html">home</a></li>
      <li><a href="shop.html">shop</a></li>
      <li><a href="sport.html">sport</a></li>
      <li><a href="read.html">read</a></li>
      <li><a href="about.html">about</a></li>
    </ul>
  </nav>
</header>