Question

我目前正在尝试通过生成响应式导航菜单来升级我的HTML和CSS技能，我觉得我有些混乱-这是我的问题：当我的页面宽度大于768px时，我希望隐藏div类别为“ menu__hamburger”，并显示DIV类别为“ header__navigation”的项目的无序列表。如果页面宽度小于768像素，我希望显示类别为“ menu__hamburger”的div，但删除div“ menu__hamburger”，以便它用类标题填充父DIV的整个宽度。

请允许我用一些图像进行演示：

布局大于768px

小于768像素的布局（请注意header__导航如何降到下一行）

我当前要显示header__navigation的原因是因为我正在设置header__navigation的样式。稍后，我希望使用一个隐藏的复选框来在用户单击带有menu__hamburger类的div时使用CSS切换标题__导航的显示。但是我认为我的HTML结构很糟糕，因为我无法获得header__导航来“放下”并“占用一整行”。

到目前为止，这是我的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像素）？

最好将其删除，而您希望在用户单击汉堡包菜单时显示无序列表吗？

Answer 2

我不确定我是否完全理解您的要求，但似乎您正在寻找将导航导航到较小屏幕上的汉堡菜单的方法。我可以输入代码，但是在w3schools上有一个关于如何创建此代码的清晰说明。希望这可以帮助！

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

2 个答案: