0

Проблема заключается в том, что выпадающий блок (.head__list-nav) не скрывается и не корректно из-за этого появляется. Также псведоэлемент блока (.head__item_open::after) не поворачивается при нажатии на его родителя (.head__item_open).

const menu = document.querySelectorAll(".head__item_open");

menu.forEach(menu => {
    menu.addEventListener('click', () => {
        menu.classList.toggle("active");
    })
});
a {
  text-decoration: none;
}

ul {
  list-style: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}

li:last-child {
  margin: 0;
}
.head__list-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  max-width: 419px;
  width: 100%;
  margin: 0 auto;
}

.head__link {
  font-family: "Gotham Pro Regular", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #333333;
}

.head__item_open {
  position: relative;
}

.head__item_open.active .head__list-drop {
  max-height: 1000px;
  min-width: 205px;
  width: 100%;
}

.head__item_open.active ~ .head__item_open .head__item_open::after {
  transform: rotate(180deg);
  -webkit-transition: -webkit-transform 0.5s ease-in;
  transition: -webkit-transform 0.5s ease-in;
}

.head__item_open::after {
  content: "?";
  position: absolute;
  top: 2px;
  right: -14px;
}

.head__list-drop {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 27px 0 24px 23px;
  background-color: #da4523;
  -webkit-box-shadow: 0 20px 48px rgba(177, 177, 177, 0.4);
          box-shadow: 0 20px 48px rgba(177, 177, 177, 0.4);
  border-radius: 16px;
  position: absolute;
  top: 45px;
  left: -25px;
  z-index: 1;
  -webkit-transition: all 1.4s ease;
  transition: all 1.4s ease;
  max-width: 0;
  max-height: 0;
  overflow: hidden;
}

.head__item-drop {
  margin-bottom: 20px;
}

.head__link:hover {
  -webkit-transition: all ease-in 0.2s;
  transition: all ease-in 0.2s;
  border-bottom: 1px solid #1749B3;
  color: #1749B3;
  font-weight: 700;
}

.head__link-drop:hover {
  -webkit-transition: all ease-in 0.2s;
  transition: all ease-in 0.2s;
  color: #1749B3;
  font-weight: 700;
}

.head__link-drop {
  font-family: "Gotham Pro Regular", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 150%;
  color: #171717;
}
<ul class="head__list-nav">
    <li class="head__item head__item_open"><a class="head__link" href="#">Subscriptions</a>
    <ul class="head__list-drop">
        <li class="head__item-drop"><a class="head__link-drop" href="#">Netflix</a>
        <li class="head__item-drop"><a class="head__link-drop" href="#">YouTube Premium</a>
        <li class="head__item-drop"><a class="head__link-drop" href="#">Spotify</a>
    </ul>
    </li>
    <li class="head__item"><a class="head__link" href="#">FAQ</a></li>
    <li class="head__item"><a class="head__link" href="#">Support</a></li>
    <li class="head__item"><a class="head__link" href="#">About</a></li>
</ul>

1 ответ 1

1
  • Отсутствуют закрывающие теги для элементов списка в блоке .head__list-drop
  • Для .head__list-drop установлен padding: 27px 0 24px 23px;, что уже задает его минимальную высоту и ширину, в этом случае max-height|max-width учитываться не будет. Паддинг необходимо перенести в .head__item_open.active .head__list-drop
  • .head__item_open.active~.head__item_open .head__item_open::after неправильный селектор, нужен .active.head__item_open::after
  • Везде установлен transition: all, указывайте конкретные анимации (высота, ширина и т.п.)

const menu = document.querySelectorAll(".head__item_open");

menu.forEach(menu => {
  menu.addEventListener('click', () => {
    menu.classList.toggle("active");
  })
});
a {
  text-decoration: none;
}

ul {
  list-style: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}

li:last-child {
  margin: 0;
}

.head__list-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  max-width: 419px;
  width: 100%;
  margin: 0 auto;
}

.head__link {
  font-family: "Gotham Pro Regular", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #333333;
}

.head__item_open {
  position: relative;
}

.head__item_open.active .head__list-drop {
  max-height: 1000px;
  min-width: 205px;
  width: 100%;
  padding: 27px 0 24px 23px;
}

.active.head__item_open::after {
  transform: rotate(180deg);
  -webkit-transition: -webkit-transform 0.5s ease-in;
  transition: -webkit-transform 0.5s ease-in;
}

.head__item_open::after {
  content: "?";
  position: absolute;
  top: 2px;
  right: -14px;
}

.head__list-drop {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  
  background-color: #da4523;
  -webkit-box-shadow: 0 20px 48px rgba(177, 177, 177, 0.4);
  box-shadow: 0 20px 48px rgba(177, 177, 177, 0.4);
  border-radius: 16px;
  position: absolute;
  top: 45px;
  left: -25px;
  z-index: 1;
  -webkit-transition: all 1.4s ease;
  transition: all 1.4s ease;
  max-width: 0;
  max-height: 0;
  overflow: hidden;
}

.head__item-drop {
  margin-bottom: 20px;
}

.head__link:hover {
  -webkit-transition: all ease-in 0.2s;
  transition: all ease-in 0.2s;
  border-bottom: 1px solid #1749B3;
  color: #1749B3;
  font-weight: 700;
}

.head__link-drop:hover {
  -webkit-transition: all ease-in 0.2s;
  transition: all ease-in 0.2s;
  color: #1749B3;
  font-weight: 700;
}

.head__link-drop {
  font-family: "Gotham Pro Regular", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 150%;
  color: #171717;
}
<ul class="head__list-nav">
  <li class="head__item head__item_open"><a class="head__link" href="#">Subscriptions</a>
    <ul class="head__list-drop">
      <li class="head__item-drop"><a class="head__link-drop" href="#">Netflix</a></li>
      <li class="head__item-drop"><a class="head__link-drop" href="#">YouTube Premium</a></li>
      <li class="head__item-drop"><a class="head__link-drop" href="#">Spotify</a></li>
    </ul>
  </li>
  <li class="head__item"><a class="head__link" href="#">FAQ</a></li>
  <li class="head__item"><a class="head__link" href="#">Support</a></li>
  <li class="head__item"><a class="head__link" href="#">About</a></li>
</ul>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.