Добавление стиля к ссылке при нажатии на класс и удаление его при повторном нажатии на этот класс - PullRequest
Новая
       4

Добавление стиля к ссылке при нажатии на класс и удаление его при повторном нажатии на этот класс

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

У меня есть бургер (3 строки) <div class="burger"> в моем navbar для мобильного просмотра (768 пикселей / меньше). Когда я нажимаю на него, меню скользит справа. бургер скрыт в представлении рабочего стола.

Я хочу добавить ширину к ссылкам меню #menu li a после того, как я нажму на бургер, чем после удаления ширины, когда на гамбургер снова нажимают или когда страница ширина выше 768 пикселей. До сих пор мне удавалось заставить ширину применяться к бургеру, когда он щелкает, но даже когда я нажимаю его снова и проверяю представление рабочего стола, ширина не будет go отсутствовать.

Мои текущие коды: 

// Navbar Slide
const burger = document.querySelector('.burger');
const menu = document.getElementById('menu');
const menuLinks = document.querySelectorAll('#menu li');
const menuCS = window.getComputedStyle(menu);
const width = menuCS.width;
const widthTest = '200px';
const navLinks = document.querySelectorAll('#menu li a');

const navSlide = () => {
  burger.addEventListener('click', () => {
    // @ toggle nav
    menu.classList.toggle('menu-active');

    // @ nav links width
    navLinks.forEach((link) => {
      link.style.width = width;
    });

    // @ links animation
    menuLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = '';
      } else {
        link.style.animation = `menuLinkFade .5s ease forwards ${index / 7 + 0.4}s`;
      }
    });

    // @ burger animation
    burger.classList.toggle('toggle');
  });
}

navSlide();
#menu {
  display: flex;
  justify-content: space-around;
  width: auto;
  height: 8vh;
  margin-right: 10%;
}

#menu li a {
  display: inline-block;
  line-height: 8vh;
  color: #ffffff;
  text-decoration: none;
  padding: 0 20px;
}

.burger {
  display: none;
  margin-right: 10%;
}

@media screen and (max-width:768px) {
  #menu {
    position: absolute;
    top: 8vh;
    right: 0;
    height: 92vh;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #313131;
    margin: 0;
    justify-content: normal;
    transform: translateX(100%);
    transition: transform .5s ease-in;
  }
  #menu.menu-active {
    transform: translateX(0%);
  }
  #menu li a {
    text-align: center;
    padding: 40px 0;
  }
  .burger {
    display: block;
    cursor: pointer;
    position: absolute;
    right: 0;
  }
}
<div id="nav">
  <div class="logo">
    <h4>The Nav</h4>
  </div>
  <ul id="menu">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a class="view"></li>
        <li><a href="#">Contact</a class="view"></li>
        <li><a href="#">Product</a class="view"></li>
      </ul>
      <div class="burger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
      </div>
    </div>

Я пробовал разные подходы, но у меня ничего не получается.

1 Ответ

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

решено. Я просто добавил class="desktop" к ссылкам и добавил width: auto !important в него, а затем добавил это к javascript: 

// @ nav links width
navLinks.forEach((link) => {
  link.style.width = width;
  link.classList.toggle('desktop');
});

// Check Width
window.addEventListener("resize", function(event) {
  if (document.body.clientWidth > 751) {
    if (!navLinks.desktop) {
      navLinks.forEach((link) => {
        link.classList.add('desktop');
      });
    }

    menu.classList.remove('menu-active');
    burger.classList.remove('toggle');
    menuLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = '';
      } else {
        link.style.animation = '';
      }
    });
  }

  menu.style.transition = '';
});

}

...