Атрибут data-* тега <menu>
Описание
Атрибуты data-* для тега <menu> позволяют хранить дополнительную информацию, связанную с меню, которая может быть использована JavaScript или CSS. Эти пользовательские атрибуты особенно полезны для динамических меню и сложных навигационных систем.
<menu id="main-menu" data-menu-type="dropdown" data-transition="fade">
<li data-item-type="link">Главная</li>
<li data-item-type="button" data-action="logout">Выйти</li>
</menu>
Типичные data-атрибуты для меню:
| Атрибут | Назначение | Пример значения |
|---|---|---|
data-menu-type |
Тип меню (dropdown, context, toolbar) | "dropdown" |
data-transition |
Анимация перехода | "slide", "fade" |
data-orientation |
Ориентация меню | "horizontal", "vertical" |
Пример с CSS:
<style>
menu[data-orientation="horizontal"] {
display: flex;
gap: 1rem;
}
menu[data-menu-type="dropdown"] li:hover {
background-color: #f5f5f5;
}
li[data-action="logout"] {
color: #ff4444;
}
</style>
<menu data-orientation="horizontal" data-menu-type="dropdown">
<li data-action="home">Главная</li>
<li data-action="logout">Выйти</li>
</menu>
Рекомендации по использованию:
- Используйте осмысленные имена атрибутов
- Храните только простые данные (для сложных структур используйте JSON)
- Сочетайте с ARIA-атрибутами для доступности
- Избегайте дублирования информации, уже присутствующей в других атрибутах
Ограничения и совместимость:
- Поддерживается всеми современными браузерами
- Имена атрибутов должны быть в нижнем регистре
- Не используйте для критически важных данных (можно изменить в DOM)
- Доступ через
datasetне работает в IE10 и ниже
Примечание: Атрибуты data-* особенно полезны для создания интерактивных меню, где нужно связывать элементы навигации с соответствующими действиями или состояниями. Для сложных меню-конструкторов рассмотрите использование JavaScript-фреймворков.