Отзывчивое меню - показывать гамбургер или ячейки в зависимости от ширины экрана с помощью Flex Box

Question

В настоящее время я пытаюсь улучшить свои навыки работы с HTML и CSS путем создания адаптивного навигационного меню, и мне кажется, что я попал в некоторую путаницу - вот моя проблема: когда ширина моей страницы превышает 768 пикселей, я хочу скрыть div с классом «menu__hamburger» и показывает неупорядоченный список элементов с DIV с классом «header__navigation». Если ширина страницы меньше 768 пикселей, я хочу показать div с классом «menu__hamburger», но опустить div «menu__hamburger», чтобы он заполнил всю ширину родительского DIV заголовком класса.

Разрешите мне продемонстрировать некоторые изображения:

Макет больше 768 пикселей

Макет менее 768 пикселей (обратите внимание, как заголовок __nigation перемещается в следующую строку)

Причина, по которой я хочу показать header_navigation в настоящее время, заключается в том, что я стилизирую header__navigation. Позже я хочу использовать скрытый флажок, чтобы переключить отображение заголовка __nigation с помощью css, когда пользователь щелкает элемент div с классом menu__hamburger. Однако я думаю, что я плохо структурировал свой HTML, так как я не могу заставить header__nigation «отбрасывать» и «занимать полную строку».

Вот мой 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

Я не уверен, что полностью понимаю ваш вопрос, но похоже, что вы хотите поместить свою навигацию в меню гамбургеров на небольших экранах. Я мог бы напечатать код, но на w3schools есть довольно четкое объяснение того, как его создать. Надеюсь это поможет! ?

Answer 2

Итак, во-первых, зачем вам это нужно (минимальная ширина: 320 пикселей)?

Лучше удалить его, и вы хотите, чтобы при нажатии пользователем меню гамбургера отображался неупорядоченный список?