Панели навигации на CSS
Урок Layout набросал области страницы. Панель навигации — полоса ссылок, которая помогает людям перемещаться между этими областями и страницами. Начните с семантического списка ссылок, выложите их спокойным рядом, затем добавьте подсказки hover — вложенные выпадающие меню оставьте следующему уроку.
Набор инструментов навигации
📊 Навигация одним взглядом
| Часть | Повседневная роль |
|---|---|
nav |
Landmark для основных/вторичных ссылок сайта |
ul / li / a |
Структурированный список назначений |
| Сброс списка | Убрать маркеры и отступ по умолчанию для панелей |
| Горизонтальный ряд | Flex или inline-block, чтобы ссылки сидели рядом |
| Hover / текущая | Обратная связь указателя и «вы здесь» |
| Вертикальная nav | Тот же список столбиком — удобно в сайдбарах |
Навигация — всё ещё ссылки. Держите контуры фокуса видимыми, дайте удобный padding и не прячьте смысл в безымянных кучах div.
Семантический список внутри nav
Оберните меню в nav и держите назначения как настоящие якоря в списке. Скринридеры и будущий вы скажете спасибо за структуру.
.nav {
list-style: none;
margin: 0;
padding: 0;
}
.nav a {
text-decoration: none;
color: inherit;
}
Горизонтальная панель с Flex
Простой flex-ряд превращает список в панель. Gap и padding лучше тесных зон нажатия. (Глубже Flexbox — позже; для чистой navbar этого достаточно.)
.navbar .nav {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
align-items: center;
}
.navbar .nav a {
display: inline-block;
padding: 0.5rem 0.75rem;
}
Подсказки hover и текущей страницы
Дайте обратную связь при hover и отметьте текущую страницу классом. Никогда не убирайте контуры :focus «ради порядка».
.nav a:hover {
background: #f0f4ff;
border-radius: 0.35rem;
}
.nav a.is-current {
font-weight: 700;
color: #0b5fff;
}
Вертикальная боковая навигация
Тот же список может складываться в сайдбаре. Держите отступы щедрыми, чтобы каждую ссылку было легко нажать.
.sidenav .nav {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.sidenav .nav a {
padding: 0.55rem 0.75rem;
}
Спокойная привычка навигации
Используйте nav + список + читаемый padding. Предпочитайте flex-ряды для горизонтальных панелей. Мегаменю и dropdown оставьте следующему уроку. Не путайте полосу ссылок с полной оболочкой макета страницы.
.site-nav { /* landmark wrapper */ }
.site-nav__list { /* the ul */ }
.site-nav__link { /* each a */ }
.site-nav__link.is-current { /* active page */ }
Попробуйте сами
- Соберите
nav > ul.nav > li > aи сбросьте стили списка. - Выложите ссылки горизонтальным flex-рядом с padding и gap.
- Добавьте стили
:hoverи.is-current. - Дублируйте список как вертикальный вариант sidenav.
- Напишите одно предложение: что относится к уроку Dropdowns, а не сюда?
Частые ошибки
- Крошечный padding, который промахивается по touch и мыши
- Навсегда убирать контуры фокуса
- Каша из div вместо
navи списков - Строить вложенные dropdown-мегаменю в этом уроке
- Считать navbar всем макетом сайта
Итог
- Панели навигации — структурированные списки ссылок внутри
nav - Сбросьте маркеры, затем расположите через flex (или inline-block)
- Стили hover и текущей ведут без убийства фокуса
- Вертикальная nav — тот же список столбиком
- Выпадающие меню ждут следующего урока
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху