CSS: Responsive menu

наверх

Добрый день, уважаемые читатели!

Мне часто пишут отзывы типа: «Больше! Еще больше статей по адаптивной верстке!».

Так вот, сегодня будет именно такая статья. И сегодня мы разберем, как сделать несложное адаптивное меню.

Перед тем, как приступить, рекомендую прочитать статью по media queries в CSS, так как в данной статье мы будем использовать данную конструкцию.

Итогом прочтения статьи будет следующее меню:

Начнем с HTML

<input type="checkbox" id="menu">
<label for="menu" onclick></label> <!-- иконка для маленьких экранов -->

<nav role="off-canvas"> <!-- наше меню -->
    <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Статьи</a></li>
        <li><a href="#">Проекты</a></li>
        <li><a href="#">О нас</a></li>
        <li><a href="#">Контакты</a></li>
    </ul>
</nav>

<div class="content-text">
    ...
</div>

По сути ничего сложного. Label будет отображаться при маленьком разрешении экрана. Первый checkbox нужен для применения нужных стилей. При щелчке по label будет происходить переключение checkbox, так как у label указан for=menu.

На больших экранах мы скроем label:

label {
  position: absolute;
  left: 0;
  display: none;
}

На маленьких экранах мы скроем основное меню и покажем label / input.

Стили для небольших экранов

Для определения маленьких экранов мы воспользуемся media queries:

@media screen and (max-width: 44em) {
    ...
}

Чтобы спрятать меню мы добавим ему ширину и добавим отрицательное смещение влево.

nav {
    position: absolute;
    top: 23em;
    left: -20em; /* сдвинули */
    width: 20em; /* задали ширину */
    opacity: 0;
}

Чтобы пользователь понял, что label — это иконка, добавим для нее псевдо-элемент с text «≡» (\2261)

label:after {
    content: "\2261";
}

Когда пользователь кликает по иконке — меню выдвигается слева, а контент смещается вправо.

/* как раз вот для этого нам и понадобился input */
input:checked ~ nav {
    opacity: 1;
    left: 0;
    box-shadow: -30em 0 0 30em rgba(0, 0, 0, 0.3);
}
input:checked ~ .content-text {
    margin-left: 20.5em;
    margin-right: -20.5em;
}

Ниже представлен общий код для небольших экранов

/* маленькие экраны */
@media screen and (max-width: 44em) {
    html,
    body {
        margin: 0;
        overflow-x: hidden;
    }

    .content-text {
        margin: 2.5em .5em 0 .5em;
    }

    nav {
        position: absolute;
        top: 23em;
        left: -20em;
        width: 20em;
        opacity: 0;
    }
        nav ul > li {
            height: 100%;
            width: 100%;
            text-align: left;
            margin: 0;
        }

    label {
        display: block;
    }

        label:after {
            content: "\2261";
            font-size: 1.8em;
        }

        label:hover,
        input:checked ~ label {
            color: #000;
        }

    input:checked ~ nav {
        opacity: 1;
        left: 0;
        box-shadow: -30em 0 0 30em rgba(0, 0, 0, 0.3);
    }
        input:checked ~ nav ul > li {
            padding: .55em .55em .55em 1.5em;
        }
        input:checked ~ nav ul > li:hover {
            padding-left: 3.5em;
        }
        input:checked ~ nav ul > li:after {
            position: absolute;
            right: .25em;
            content: "\203A";
            font: bold 1.4em sans-serif;
            color: inherit;
        }

    input:checked ~ .content-text {
        margin-left: 20.5em;
        margin-right: -20.5em;
    }
}

На больших экранах меню выглядит так: