javascript - 带有 JS 的自适应菜单

Question

我在我的 html 中创建了导航，我想让它自适应:当宽度低于 764px 时删除这个 <nav>并添加图标按钮，它以列模式在下拉菜单中打开我的导航。 我用的是 flexbox，想用 clear JS。

第二个问题是我的下拉菜单在打开时不占用空间，我应该使用类似 position: ; 的东西吗？还是其他？

HTML:

<header>
    <nav class="header__nav">
        <div class="container">
            <div class="navbar--wrapper">
                <div class="openButton" id="openButton">Open the menu!</div>
                <ul class="navbar" id="navbar">
                    <li class="nav__link"><a href="#">element7</a></li>
                    <li class="nav__link"><a href="#">element2</a></li>
                    <li class="nav__link"><a href="#">element3</a></li>
                    <li class="nav__link"><a href="#">element4</a></li>
                    <li class="nav__link"><a href="#">element5</a></li>
                    <li class="nav__link"><a href="#">element6</a></li>
                    <li class="nav__link"><a href="#">element7</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>
<script src="scripts/menu.js"></script>

CSS:

*, *:before, *:after {
    box-sizing: border-box;
    font-family: "Open Sans",sans-serif;
}

body {
    margin: 0;
}

.container {
    width: 1200px;
    margin: 0 auto;
    height: inherit;
}

h1 {
    font-size: 20px;
    font-weight: normal;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

/* HEADER ============ */

nav.header__nav {
    height: 70px;
    background-color: #1156ed;
}

.contact-number {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

.contact__row {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.contact-text {
    font-weight: 600;
    font-size: 18px;
    margin-left: 5px;
}

.navbar--wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.openButton {
    display: none;
    cursor: pointer;
}

@media (max-width: 764px) {
    .openButton {
        display: flex;
    }
    ul.navbar {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
    }
    ul.navbar:active {
        display: flex;
        flex-direction: column;
    }
    ul.navbar>li {
        display: flex;
    }
}

ul.navbar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

li.nav__link {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

li.nav__link:hover {
    background-color: #0f3ea3;
    transition: 1s ease-out;
}

li.nav__link > a {
    color: #ffffff;
    text-transform: uppercase;
    font-size: 15px;
}

JS:

window.onload function() {
    var navbarStyle = getComputedStyle(navbar);

    openButton.onclick function() {
        if (navbarStyle.display == "none") {
            navbar.classList.add("active");
            this.innerHTML = "Close";
        } else {
            navbar.classList.remove("active");
            this.innerHTML = "Open";
        }
    }
}

Answer 1

问题出在 JS 代码上，原因如下: JS:

function myFunction() {
    var x = document.getElementById("navbar");
    if (x.className === "navbar") {
      x.className += " responsive";
    } else {
      x.className = "navbar";
    }
}

此外，我更改了元素的高度，所以现在它们以正常高度打开