html - 响应式菜单 - 使用 Flex Box 根据屏幕宽度显示汉堡包或单元格

Question

我目前正在尝试通过制作响应式导航菜单来提升我的 HTML 和 CSS 技能，但我觉得我遇到了一些麻烦 - 这是我的问题:当我的页面宽度大于 768 像素时，我想隐藏具有类“menu__hamburger”的 div 并显示具有类“header__navigation”的 DIV 的元素的无序列表。如果页面宽度小于 768px，我希望显示带有类“menu__hamburger”的 div，但删除 div“menu__hamburger”，以便它用类标题填充父 DIV 的整个宽度。

请允许我用一些图片来演示:

大于 768px 的布局

布局小于 768px(注意 header__navigation 如何下降到下一行)

我现在想要显示 header__navigation 的原因是因为我正在设计 header__navigation。稍后，当用户单击带有 menu__hamburger 类的 div 时，我希望使用一个隐藏的复选框来使用 css 切换 header__navigation 的显示。但是我认为我的 HTML 结构很糟糕，因为我无法将 header__navigation 设置为“放下”和“占据一整行”。

到目前为止，这是我的 HTML(这里有一个 jsbin:https://jsbin.com/wecemiyepe/edit?html,css,output):

<div class="header">
    <div class="header__logo">
        <img src="brand-logo.png">
    </div>
    <div class="menu__hamburger">
        <label for="menuToggle">&#9776;</label>
        <input type="checkbox" id="menuToggle">
    </div>
    <div class="header__navigation">
        <ul class="menu">
            <li class="menu__item">Home</li>
            <li class="menu__item">Company</li>
            <li class="menu__item">Services</li>
            <li class="menu__item">Products</li>
            <li class="menu__item">Careers</li>
            <li class="menu__item">Contact</li>
        </ul>
    </div>
</div>

这是我的 CSS

.header {
    display: flex;
    background-color: black;
    border-bottom: 1px solid white;
    align-items: center;
}

.header__logo {
    flex: 0 1 30%;
    padding: 10px 20px;
}

.header__navigation {
    flex: 1 1 auto;
    align-items: flex-end;
    padding: 10px 20px;
}

.menu {
    margin: 0;
    padding: 0;
    color: white;
    list-style: none;
    display: flex;
}

.menu__item {
    flex: 1 1 auto;
}

.menu__hamburger {
    color: white;
    display: none;
}

input[type=checkbox] + label {
    display: none;
}


@media only screen and (min-width: 320px) and (max-width: 768px) {

    .menu__hamburger {
        color: white;
        display: flex;
        justify-content: flex-end;
        font-size: 40px;
    }

    input[type=checkbox] {
        display: none;
    }

    /*
    ToDo - toggle display of  .menu if is checked
    input[type=checkbox]:checked
    */

    .menu {
        /* display: none; */
        flex-direction: column;
        flex: 1 0 100%;
    }

    .menu__item {
        text-transform: uppercase;
        border-bottom: 1px solid #fff;
        padding: 10px;
    }
}

我会继续坚持我的代码，但如果有人能给我提示以使其正常工作，我将不胜感激。这里再次提供一个 JSbin 的链接，代码为:https://jsbin.com/wecemiyepe/edit?html,css,output

Answer 1

那么首先为什么需要它(最小宽度:320 像素)？

最好删除它，并且您希望当用户单击汉堡菜单时，显示无序列表？