гамбургер навбар проблемы с активацией - PullRequest
Новая
       5

гамбургер навбар проблемы с активацией

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

У меня проблемы с тем, чтобы заставить это работать ... Я смотрю учебник (не старый) и внимательно следил. Кто-нибудь может увидеть проблемы с этим кодом или почему он не должен работать? Я начал несколько раз, но та же проблема. Бургер есть, но ничего не происходит, когда я нажимаю на него. HTML

          <ul class="nav__links">
            <li><a class="hvr-reveal hjem" href="index.php">Home</a></li>
            <li><a class="hvr-reveal status" href="status.html">WEB Status</a></li>
            <li><a class="hvr-reveal weather" href="#">Weather</a></li>
            <li><a class="hvr-reveal adventure" href="info.html">Adventure</a></li>
          </ul>
        <div class="burger">
          <div class="line1"></div>
          <div class="line2"></div>
          <div class="line3"></div>
        </div>
      </nav>

CSS

.burger {
  display: none;
  cursor: pointer;
}

.burger div{
   width: 25px;
   height: 2px;
   background-color: white;
   margin: 5px;
}

@media screen and (max-width:768px){
  body {
    overflow-x: hidden;
  }
  .nav__links {
    position: absolute;
    right: 0px;
    height: 92vh;
    background-color: red;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 8vh;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .nav__links li{
    opacity: 0;
  }
  .burger {
    display: block;
  }
}

.nav-active {
  transform: translateX(0%);
}

Java Сценарий 

const navSlide = () => {
   const burger = document.querySelector('.burger');
   const nav = document.querySelector('.nav__links');

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

navSlide();

1 Ответ

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

измените строку javascript, для classList требуется прописная буква L 

nav.classList.toggle('nav-active');

А также, ваш класс .nav-active ничего не делает.

Например, измените 

.nav-active {
   transform: translateX(0%);
}

на 

.nav-active {
  transform: translateX(10%);
}

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

Просто подсказка : поскольку более 50% браузеров поступают с мобильных устройств, вы должны написать css, используя подход «сначала мобильный». Это означает, что вы должны попытаться использовать min-width, если вам действительно нужно использовать медиа-запросы. Например: 

.burger {
  display: none;
}
@media screen and (max-width:768px){
  .burger {
     display: block;
  }
}

, но 

@media screen and (min-width:768px){
  .burger {
     display: none;
  }
}

, поэтому мобильная версия становится стандартной и, следовательно, более быстрой.

...