Выпадающее меню не работает

Рейтинг: 0Ответов: 1Опубликовано: 21.06.2023

const navBtn = document.querySelector('.nav-btn');
const navigation = document.querySelector('.nav');

navBtn.addEventListener('click', () => {
  navigation.classList.toggle('nav-open');
  if (navigation.classList.contains('nav-open')) {
    navBtn.src = 'img/three lines.png';
  } else {
    navBtn.src = 'img/cross.png';
  }
});
.container {
  width: 100%;
  max-width: 1445px;
  margin: 0 auto;
  padding: 0 15px;
}


/* header */

.header {
  font-family: 'Rubik', sans-serif;
}

.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-logo {
  margin-right: auto;
  margin-top: 32px;
}

.nav-list {
  display: flex;
  column-gap: 36px;
  margin-top: 41px;
}

.nav-link {
  font-weight: 400;
  font-size: 18px;
  line-height: 18px;
  color: rgba(34, 35, 38, 0.8);
}

.nav-link:hover {
  font-weight: 600;
  color: #222326;
}

.nav-btn {
  width: 25px;
  height: 25px;
  display: none;
}

.phone-img {
  margin-left: auto;
  margin-top: 34px;
}

.phone {
  margin-left: 12px;
  margin-top: 27px;
}

.phone-info {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #000000;
}

.phone-link {
  font-weight: 400;
  font-size: 18px;
  line-height: 21px;
  color: #000000;
}

.phone-link:hover {
  text-shadow: 1px 1px 1px #222326;
  cursor: pointer;
}

@media (max-width: 1050px) {
  /* header */
  .nav-list {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    transform: translateY(-100%);
    transition: 0.3s ease;
  }
  .nav-btn {
    display: inline-block;
  }
  .nav-open .nav-list {
    transform: translateY(0);
  }
  .nav-item {
    padding: 40px 0;
    font-size: 40px;
  }
  .header-logo {
    z-index: 5;
  }
}
<header class="header">
  <div class="container">
    <div class="header-nav">
      <img src="img/Logo.svg" alt="logo" class="header-logo">
      <nav class="nav">
        <img src="img/three lines.png" alt="" class="nav-btn">
        <ul class="nav-list">
          <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
          <li class="nav-item"><a href="#" class="nav-link">About</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Services</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Blog</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Testimonials</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
        </ul>
      </nav>
      <img src="img/phone.svg" alt="icon phone" class="phone-img">
      <div class="phone">
        <p class="phone-info">Call us now</p>
        <a href="tel:+12434214121" class="phone-link">+1 (243) 421 4121</a>
      </div>
    </div>
  </div>
</header>

https://i.sstatic.net/eKg8Z.png

А должно выглядеть примерно вот так https://i.sstatic.net/iPQ3n.png https://i.sstatic.net/twKPr.png

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0

Если объекту nav-list задать background-color то все становится понятно. Есть некоторые замечания по коду, но я их оставлю при себе. Моя реализация вашей задачи:

document.addEventListener("DOMContentLoaded", function(event) {

  const navBtn = document.querySelector('.nav-btn');
  const navigation = document.querySelector('.nav');

  navBtn.addEventListener('click', () => {
    navigation.classList.toggle('nav-open');
    if (navigation.classList.contains('nav-open')) {
      navBtn.src = 'https://cs6.pikabu.ru/avatars/363/v363925-755357385.jpg';
      document.querySelector(".nav-list").setAttribute("style", "margin-block-start:7em;");

    } else {
      navBtn.src = 'https://brandfans.ru/images/menu.png';
      document.querySelector(".nav-list").setAttribute("style", "margin-block-start:0em;");
    }
  });
});
.container {
  width: 100%;
  max-width: 1445px;
  margin: 0 auto;
  /*padding: 0 15px;*/
}


/* header */

.header {
  font-family: 'Rubik', sans-serif;
}

.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-nav div:nth-child(1) {
  order: 0;
}

.header-nav div:nth-child(2) {
  order: 1;
}

.header-nav div:nth-child(3) {
  order: 2;
}

.header-logo {
  margin-right: auto;
  /* margin-top: 32px;*/
}

.nav-list {
  display: flex;
  column-gap: 36px;
  margin-top: 41px;
}

.nav-link {
  font-weight: 400;
  font-size: 18px;
  line-height: 18px;
  color: rgba(34, 35, 38, 0.8);
}

.nav-link:hover {
  font-weight: 600;
  color: #222326;
}

.nav-btn {
  width: 25px;
  height: 25px;
  display: none;
}

.phone-img {
  /* margin-left: auto;
    margin-top: 34px;*/
}

.phone {
  margin-left: 12px;
  /* margin-top: 27px;*/
}

.phone-info {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #000000;
}

.phone-link {
  font-weight: 400;
  font-size: 18px;
  line-height: 21px;
  color: #000000;
}

.phone-link:hover {
  text-shadow: 1px 1px 1px #222326;
  cursor: pointer;
}

@media (max-width: 1050px) {
  /* header */
  .nav-list {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    transform: translateY(-100%);
    transition: 0.3s ease;
  }
  .nav-btn {
    /*display: inline-block;*/
    display: block;
  }
  .nav-open .nav-list {
    transform: translateY(0);
  }
  .nav-item {
    padding: 40px 0;
    font-size: 40px;
  }
  .header-logo {
    z-index: 5;
  }
  .header-nav div:nth-child(1) {
    order: 0;
  }
  .header-nav div:nth-child(2) {
    order: 2;
  }
  .header-nav div:nth-child(3) {
    order: 1;
  }
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <title>Кнопка</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="functions.js"></script>
</head>

<body>
  <header class="header">
    <div class="container">
      <div class="header-nav">
        <div>
          <img src="https://cdn.icon-icons.com/icons2/1914/PNG/512/applelogotype_121536.png" alt="logo" class="header-logo" style="width:50px;height:50px;">
        </div>
        <div>
          <nav class="nav">
            <img src="https://brandfans.ru/images/menu.png" alt="" class="nav-btn" style="width:50px;height:50px;">
            <ul class="nav-list" style="margin-block-start:0em;">
              <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
              <li class="nav-item"><a href="#" class="nav-link">About</a></li>
              <li class="nav-item"><a href="#" class="nav-link">Services</a></li>
              <li class="nav-item"><a href="#" class="nav-link">Blog</a></li>
              <li class="nav-item"><a href="#" class="nav-link">Testimonials</a></li>
              <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
            </ul>
          </nav>
        </div>
        <div style="display:flex;align-items:center;">
          <img src="https://images.satu.kz/159575824_159575824.jpg" alt="icon phone" class="phone-img" style="width:50px;height:50px;">
          <div class="phone">
            <p class="phone-info">Call us now</p>
            <span><a href="tel:+12434214121" class="phone-link">+1 (243) 421 4121</a></span>
          </div>
        </div>
      </div>
    </div>
    </div>
  </header>
</body>

</html>

скрины: введите сюда описание изображения введите сюда описание изображения