Javascript-форум - Показать сообщение отдельно

рони · #2 (**permalink**) 25.04.2021, 18:40

Сообщение от 1111

Получить высоту через Js я тоже не могу,

строки 132 и 185

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>

<body>
<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: var(--hh, 530px);
    transition: height 2s 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>
<script>
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav');
const onBurgerClick = () => {
    nav.style.setProperty('--hh', `${nav.scrollHeight}px`)
    nav.classList.toggle('nav--hide');
};

burger.addEventListener('click', onBurgerClick);

</script>
</body>
</html>