Атрибут class тега <menu>
Описание
Атрибут class для тега <menu> позволяет назначать один или несколько CSS-классов для стилизации меню. Это дает возможность создавать различные визуальные представления меню.
<menu class="dropdown-menu dark-theme">
<li class="menu-item"><a href="#">Главная</a></li>
<li class="menu-item"><a href="#">О нас</a></li>
</menu>
<style>
.dropdown-menu {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #ddd;
width: 200px;
}
.dark-theme {
background-color: #333;
color: white;
}
.menu-item a {
display: block;
padding: 8px 16px;
text-decoration: none;
}
</style>
Типичные классы для меню:
| Класс | Назначение | Пример |
|---|---|---|
dropdown-menu |
Стиль выпадающего меню | width: 200px; box-shadow |
nav-menu |
Основная навигация | display: flex; gap: 1rem |
context-menu |
Контекстное меню | position: absolute; z-index |
Пример с модификаторами:
<menu class="menu -vertical">
<li class="menu__item">Пункт 1</li>
<li class="menu__item -active">Пункт 2</li>
</menu>
<style>
.menu {
list-style: none;
padding: 0;
}
.menu.-vertical {
display: flex;
flex-direction: column;
gap: 8px;
}
.menu__item.-active {
font-weight: bold;
color: #0066cc;
}
</style>
Рекомендации по именованию:
- Используйте БЭМ или другие методологии
- Избегайте слишком общих имен (like "box", "item")
- Разделяйте слова дефисом или подчеркиванием
- Для состояний используйте префиксы (active-, is-hidden)
Ограничения и совместимость:
- Поддерживается всеми браузерами
- Для сложных меню может потребоваться JavaScript
- Старайтесь не злоупотреблять количеством классов
- Сочетайте с ARIA-атрибутами для доступности
Примечание: Хотя атрибут class универсален для всех HTML-элементов, его использование с <menu> особенно важно для создания доступных и стилизованных навигационных интерфейсов. Для кросс-браузерной совместимости часто используют <ul> вместо <menu>.