Главная / Верстка сайта / Создание простого адаптивного меню навигации с помощью CSS

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

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

Давно прошли те времена, когда для создания веб-макетов и меню навигации использовали 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» дружной командой проекта Сайтостроение от А до Я.

О нас seoexpert

продвижение сайта,seo оптимизация,поисковое продвижение,раскрутка сайтов,поисковая оптимизация,продвижение сайта в гугл,seo раскрутка,продвижение сайтов в яндексе,продвижение сайта в google,продвижение сайтов в топ 10,Оптимизация и продвижение сайтов,услуги продвижения сайта,заказать продвижение,продвижение сайтов в топ,сео раскрутка сайта

Смотрите также

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

Рамка на HTML-страницах, созданная с помощью border color, помогает привлечь внимание к тексту или выделить ...