Здравствуйте,
Есть блок nav, который при нажатии на бургер должен оттолкнуть все ниже стоящее элементы с плавным открыванием, для этого я использую свойство heigth для nav в котором указываю высоту, но проблема в том, что могут добавляться пункты в nav, и тогда нужно в ручную пересчитывать высоту в свойстве height (если указать height: auto; то transition не срабатывает).
Получить высоту через Js я тоже не могу, т.к. при загрузки страницы, nav скрытый.
Вопрос: Как можно сделать плавное открывание меню и чтобы оно работало при любом количестве элементов в nav?
<header class="header">
<div class="burger">
<span class="burger__icon"></span>
</div>
<div class="logo">
<a class="logo__link" href="/">
<img src="#" alt="Logo" class="logo__img" width="100" height="26">
</a>
</div>
<nav class="nav nav--hide">
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href="#">Оплата и доставка</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Контакты</a>
</li>
</ul>
<p class="nav__caption">Caption 1</p>
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href="#">1</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">2</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">3</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">4</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">5</a>
</li>
</ul>
<p class="nav__caption">Caption 2</p>
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href="#">1</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">2</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">3</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">4</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">5</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">6</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">7</a>
</li>
</ul>
</nav>
</header>
<style>
img {
max-width: 100%;
height: auto;
}
.header {
position: relative;
max-width: 1440px;
width: 100%;
padding: 0;
margin: 0 auto;
}
.burger {
position: absolute;
top: 7px;
width: 30px;
height: 21px;
padding-left: 5px;
cursor: pointer;
}
.burger__icon {
width: 30px;
height: 2px;
background-color: #8978B7;
display: block;
}
.burger__icon::before,
.burger__icon::after
{
content: "";
position: absolute;
top: 9px;
width: 30px;
height: 2px;
background-color: inherit;
display: block;
}
.burger__icon::after {
top: 19px;
}
.burger:hover {
opacity: 0.5;
}
.logo {
width: 100%;
padding: 10px 0;
margin: 0;
text-align: center;
border-bottom: 1px solid #8978B7;
}
.nav {
width: 100%;
height: auto;
transition: height 500ms linear;
overflow: hidden;
}
.nav--hide {
height: 0px;
}
.nav__caption {
background-color: #474F80;
color: #ffffff;
text-align: center;
padding: 5px 0;
font-weight: bold;
text-transform: uppercase;
font-size: 16px;
}
.nav__list {
padding: 0;
margin: 0;
list-style-type: none;
text-align: center;
}
.nav__item {
border-bottom: 1px solid #8978B7;
padding: 5px 0;
}
.nav__item:last-child {
border-bottom: none;
}
.nav__link {
text-decoration: none;
color: #8978B7;
}
.nav__link:hover {
opacity: 1;
color: #423663;
}
.nav__link:active {
opacity: 0.5;
}
</style>
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav');
const onBurgerClick = () => {
nav.classList.toggle('nav--hide');
};
burger.addEventListener('click', onBurgerClick);
jsfiddle
https://jsfiddle.net/4vpyq369/1/
