Создание простого адаптивного меню навигации с помощью CSS

css-html-menu

Давно прошли те времена, когда для создания веб-макетов и меню навигации использовали HTML-таблицы. В современном инструментарии веб-разработчиков теперь применяется HTML nav. С его помощью можно создавать адаптирующиеся к различным размерам экрана макеты.

Мы все знаем, что простое и удобное меню навигации является одной из важнейших составляющих любого сайта. В этой статье я продемонстрирую часто используемый вариант создания простых меню навигации на CSS3 и HTML5.

Для этого я собираюсь использовать элемент HTML5 nav (<nav>), маркированные списки (<ul>) и гиперссылки.

Простое HTML-меню навигации с использованием CSS

Мы используем обычные HTML-списки, чтобы вывести простой и удобный список ссылок. Концепция заключается в том, чтобы упорядочить меню по горизонтали, задать для элементов меню фон, а затем добавить к ссылкам эффект наведения (медленно изменяющийся цвет фона).

Демо-версия содержит меню в 6 различных цветовых тонах, но в руководстве я рассмотрю один вариант внешнего вида меню.

HTML

В разделе body HTML-документа добавьте несколько гиперссылок маркированным списком (<ul>) и оберните их в HTML 5 nav. Смотрите приведенный ниже код:

<nav class="nav nav--red">
    <ul class="nav__list">
        <li class="nav__list__item"><a href="">Lorem</a></li><!--
        --><li class="nav__list__item"><a href="">Nobis</a></li><!--
        --><li class="nav__list__item"><a href="">Nostrum</a></li><!--
        --><li class="nav__list__item"><a href="">Quia</a></li><!--
        --><li class="nav__list__item"><a href="">Non</a></li><!--
        --><li class="nav__list__item"><a href="">Voluptate</a></li><!--
        --><li class="nav__list__item"><a href="">Magni</a></li>
    </ul>
</nav>

Пояснение

.nav выступает в роли основного контейнера для меню навигации, этот класс назначен элементу навигации HTML5 (nav). .nav__list назначен маркированному списку (ul), он действует как список ссылок. .nav__list__item — это класс, назначенный для элементов списка (li).

Я использовал классы практически для всех элементов кроме гиперссылок. Назначение классов позволяет избежать специфичности CSS.

Когда я работаю с CSS, я предпочитаю задавать имена классов согласно методологии BEM.

Еще одна особенность, которая заметна в коде — это теги комментариев HTML. Постараемся избежать перемещения элементов списка влево или вправо, поэтому для простоты я буду использовать свойство display: inline-block. Таким образом, теги комментариев удаляют крошечное пространство между элементами, связанное с display: inline-block.

Если вы предпочитаете делать элементы списка блочными и смещать их влево, необходимо использовать хак clearfix, чтобы разобраться со смещением HTML nav.

CSS

Теперь поместите следующий код внутри тегов стиля в разделе head или в отдельном внешнем файле CSS:

/**
 * Макет
 */
.nav__list {
    margin: 0;
    padding: 0;
}
.nav__list a {
    padding: .75em 1.5em;
    transition: all .25s ease-in-out;
}
.nav__list__item {
    border-style: solid;
    border-width: 0 0 1px;
}
.nav__list__item,
.nav__list__item a {
    display: block;
}
/**
 * Представление для стационарных устройств
 */
@media screen and (min-width: 1024px) {
    .nav__list > .nav__list__item {
        border-width: 0 1px 0 0;
    }
    .nav__list > .nav__list__item,
    .nav__list > .nav__list__item a {
        display: inline-block;
    }
}
/**
 * Внешний вид
 */
.nav {
    background-color: #f5f5f5;
}
.nav .nav__list__item {
    border-color: #e5e5e5;
}
.nav a {
    color: #555;
    text-decoration: none;
}
.nav a:hover, .nav a:active, .nav a:focus {
    background-color: #e5e5e5;
}

Прежде чем перейти к объяснению приведенного выше кода, посмотрите наше меню навигации на основе nav class HTML в действии:

Демо-версия

Пояснение

Я написал CSS, следуя mobile-first подходу к разработке адаптивного дизайна. Сначала мы обнуляем значения padding и margin для списка ссылок.

Затем задаем стиль и размер для гиперссылок. Я добавил некоторые дополнения к ссылкам, чтобы они выглядели прямоугольными.

Затем делаем элементы списка (<.nav__list__item>) и гиперссылки блочными элементами (display: block). Благодаря этому они будут отображаться свернутыми на планшетах и смартфонах.

Я также использую для ссылок переход, чтобы задать эффект медленного перехода цвета фона. Чтобы меню не отображалось свернутым на стационарных устройствах, я использовал медиа-запросы CSS3, а также сделал элементы списка и гиперссылки на больших экранах элементами inline-block. Это заставит их располагаться горизонтально один за другим.

Затем для улучшения внешнего вида я добавил для элементов списка цвет границы. Установил значение свойства text-decoration — none, чтобы удалить подчеркивание гиперссылок по умолчанию.

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

Это все! Вы можете поэкспериментировать с CSS-свойствами, чтобы сделать свое меню на основе HTML 5 nav более привлекательным.

Перевод статьи «Creating a Simple Responsive Navigation menu with CSS» дружной командой проекта Сайтостроение от А до Я.