Как сделать меню гамбургера только на CSS

Недавно я делал небольшие изменения на своем сайте , когда я вновь обнаружил меню гамбургера, которое я сделал для него. В нем нет ничего особенного, просто меню, которое при небольшом разрешении сжимается в скрытое вертикальное меню, которое можно показать или скрыть нажатием кнопки. Самое интересное, что оно сделано только с помощью HTML и CSS.

Я помню, что когда я его создавал, я не смог найти в интернете полного примера того, как этого добиться, и что это предполагало много проб и ошибок для достижения желаемого результата. Поэтому я извлек код меню и превратил его в упрощенный пример.

Реквизиты

Когда я начинал этот проект, у меня было несколько требований, которым он должен соответствовать:

• В нем могут использоваться только HTML и CSS, включая взаимодействия (очевидно).
• Это должно быть одно и то же меню, а не два разных меню и отображение только одного.
• В случае, если CSS не загрузится, оно должно быть, по крайней мере, функциональным.

Процесс

Проект состоит из следующих шагов:

1. Составьте список ссылок.
2. Сделайте так, чтобы список ссылок хорошо смотрелся на больших экранах.
3. Сделайте список ссылок красивым на маленьких экранах.
4. Сделать список ссылок на маленьком экране сворачиваемым.

Начальная точка, список ссылок

Меню - это, в конечном счете, список ссылок, используемых для навигации, поэтому мы начнем с него:

<nav>
    <!-- Always visible items in the nav bar -->
    <ul>
        <li>
            <a href="https://threkk.com">threkk.com</a>
        </li>
    </ul>
    <!-- The collapsable menu -->
    <ul>
        <li><a href='https://mastodon.social/@threkk'>Mastodon</a></li>
        <li><a href='https://twitter.com/threkk'>Twitter</a></li>
        <li><a href='https://github.com/threkk'>Github</a></li>
    </ul>
</nav>

Этот список - практически весь HTML, который мы будем использовать для всего меню, остальное - магия CSS.

Придание списку красивого вида на больших экранах

Эта часть проста, с небольшим количеством CSS мы готовы. Вам решать, что будет выглядеть красиво:

nav {
    background-color: SeaGreen;
    color: snow;
    display: flex;
    justify-content: space-between;
}
nav ul {
    /* Make the markers disappear */
    list-style-type: none;
}
nav ul li {
    /* Puts the elements in a single line */
    display: inline-flex;
    margin: 0.3em 1em;
}

Мы закончили с этой частью и не будем вносить в нее никаких изменений.

Чтобы список хорошо смотрелся на маленьких экранах

Используя медиа-запросы, мы ограничиваем следующие правила только маленькими разрешениями. Вы можете поиграть с используемым значением в зависимости от того, хотите ли вы, например, считать планшеты "маленькими устройствами".

@media (max-width: 576px) {
    nav {
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 0;
        margin-right: 0;
    }
    /* Because we are in mobile mode, we want to display it as a
       vertical list */
    nav ul {
        display: block;
    }
    /* We have two lists: the first one are the always visibile items
       in the menu bar. The second one is the one that will be hidden */
    nav ul:last-child {
        width: 100%;
        flex-basis: 100%;
    }
    nav ul li {
        margin-bottom: 0;
        width: 100%;
        text-align: right;
        padding: 0.5em;
    }
}

Сделать список ссылок на маленьком экране сворачиваемым.

Наконец, самая интересная часть. Вся магия здесь: если флажок не отмечен, то соседний список не отображается.

input[type='checkbox']:not(:checked)+ul {
    display: none;
}

Сначала мы добавим флажок с меткой в наш HTML.

<nav>
    <!-- Always visible items in the nav bar -->
    <ul>
        <li>
            <a href="https://threkk.com">threkk.com</a>
        </li>
    </ul>
    <!-- The hamburger menu -->
    <label for='menu' tabindex="0">
        🍔
    </label>
    <input id='menu' type='checkbox' />
    <!-- The collapsable menu -->
    <ul>
        <li><a href='https://mastodon.social/@threkk'>Mastodon</a></li>
        <li><a href='https://twitter.com/threkk'>Twitter</a></li>
        <li><a href='https://github.com/threkk'>Github</a></li>
    </ul>
</nav>

Флажок и метка будут скрыты на больших экранах, и их значение не будет иметь значения.

nav input[type='checkbox'], nav label {
    display: none;
}

Но в небольших разрешениях мы отображаем метку, а флажок оставляем скрытым в эстетических целях.

/* Stlying the menu icon, the checkbox stays hidden */
nav label {
    text-align: right;
    display: block;
    padding: 0.5em;
    line-height: 1.6em;
    align-self: center;
}

И вуаля. Вот и все. Вы можете увидеть полный пример в действии здесь , и вы можете проверить полный исходный код на GitHub .

Вам понравился этот пост? Дайте мне знать на Mastodon или Twitter!