Атрибут class тега <nav>
Описание
Атрибут class позволяет назначать классы для элемента <nav>, что дает возможность:
- Применять CSS-стили к навигационному меню
- Обращаться к меню через JavaScript
- Создавать различные варианты навигации на странице
- Активировать состояния меню (активное, скрытое и др.)
<nav class="main-navigation sticky-nav">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/products">Продукты</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>
Типовые классы для навигации:
| Класс | Назначение | Пример |
|---|---|---|
| main-nav | Основная навигация | <nav class="main-nav"> |
| footer-nav | Навигация в подвале | <nav class="footer-nav"> |
| mobile-nav | Мобильное меню | <nav class="mobile-nav"> |
| active | Активное состояние | <nav class="main-nav active"> |
Пример с CSS-стилизацией:
<style>
.primary-nav {
background: #2c3e50;
padding: 1rem;
}
.primary-nav ul {
display: flex;
gap: 2rem;
list-style: none;
}
.primary-nav a {
color: white;
text-decoration: none;
}
.primary-nav a:hover {
text-decoration: underline;
}
</style>
<nav class="primary-nav">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/services">Услуги</a></li>
</ul>
</nav>
Рекомендации по именованию:
- Используйте осмысленные имена (main-nav, sidebar-menu)
- Придерживайтесь единого стиля (BEM, kebab-case)
- Разделяйте модификаторы (--active, -open)
- Избегайте слишком общих имен (nav, menu)
Пример по методологии BEM:
<style>
.navigation {
/* базовые стили */
}
.navigation--vertical {
flex-direction: column;
}
.navigation__item--active {
font-weight: bold;
}
</style>
<nav class="navigation navigation--vertical">
<ul>
<li class="navigation__item navigation__item--active">
<a href="/">Главная</a>
</li>
<!-- другие пункты -->
</ul>
</nav>
Ограничения и совместимость:
- Поддерживается всеми браузерами
- Чувствителен к регистру в CSS/JavaScript
- Максимальная длина значения - не менее 65536 символов
- Можно назначать несколько классов через пробел
Примечание: Атрибут class является основным инструментом для стилизации и управления навигационными меню. Для сложных меню рекомендуется использовать комбинацию классов для разных состояний (открыто/закрыто, активно и др.).