Получить профессию в Skypro
Многократное раскрывающееся меню в Bootstrap 4: навигационная панель
Быстрый ответ
Для реализации многоуровневого выпадающего меню в Bootstrap 4 вам необходимо вложить элемент .dropdown-menu внутрь .dropdown-item. Для стилизации вложенных элементов можно использовать пользовательский класс, например, .dropdown-submenu:
<!-- Элемент списка навигации -->
<li class="nav-item dropdown">
<!-- Ссылка с активацией выпадающего меню -->
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Выпадающее меню</a>
<!-- Вложенное меню -->
<ul class="dropdown-menu">
<!-- Элемент подменю -->
<li class="dropdown-submenu">
<a class="dropdown-toggle" href="#">Подменю</a>
<!-- Второй уровень вложенности -->
<ul class="dropdown-menu">
<li><a href="#">Пункт подменю</a></li>
<!-- Подменю второго уровня -->
<li class="dropdown-submenu">
<a class="dropdown-toggle" href="#">Подменю второго уровня</a>
<!-- Третий уровень вложенности -->
<ul class="dropdown-menu">
<li><a href="#">Дополнительный пункт подменю</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>Стилизуйте подменю с помощью CSS:
/* Позиционирование подменю сбоку */
.dropdown-submenu .dropdown-menu {
position: absolute;
top: 0;
left: 100%;
margin-top: -1px;
}Не забудьте подключить JavaScript, jQuery и Bootstrap для корректной работы функционала.
Усовершенствование взаимодействия и доступности
Состояния наведения и фокусировки
Добавьте состояния наведения и фокусировки через CSS псевдоклассы, чтобы пользователи могли видеть выбранный элемент меню:
/* Стилизация состояний наведения и фокуса */
.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus > .dropdown-menu {
display: block;
}
Динамическое изменение состояния
Используйте JavaScript для управления показом подменю и работой сразу нескольких открытых меню:
/* Код для динамической обработки меню */
$('.dropdown-submenu a').on("click", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});Этот код позволяет каждому подменю функционировать независимо и оставаться открытым при взаимодействии с другими элементами.
Гибкая настройка
Вы можете настроить визуальное оформление и поведение выпадающего меню, создавая его на основе данных в JSON или используя серверный фреймворк:
/* Генератор пользовательского меню */
function generateMenu(menuArray) {
let html = '<ul class="dropdown-menu">';
menuArray.forEach(item => {
html += '<li class="dropdown-submenu">';
html += `<a class="dropdown-toggle" href="#">${item.title}</a>`;
if(item.submenu) {
html += generateMenu(item.submenu);
}
html += '</li>';
});
html += '</ul>';
return html;
}Визуализация
Воспринимайте многоуровневое выпадающее меню как конструкцию из блоков:
🏰: Основной блок – корневой уровень навигации
├── 🏠: Дочерний блок – выпадающий список
│ └── 🏡: Внутренний блок – подменю второго уровня
└── 🏢: Другой дочерний блок – другой выпадающий списокМеню в Bootstrap 4 организуется по принципу иерархии, где каждый элемент обеспечивает легкую и удобную навигацию:
В Bootstrap 4:
- 🏰 символизирует навигационный бар
- 🏠 & 🏢 представляют выпадающие списки в нем
- 🏡 отвечает за вложенные подменюСовместимость и оптимизация кода
Убедитесь, что ваш код совместим с актуальной версией Bootstrap 4.4.1 и избавьтесь от ненужных стилей:
/* Проверка совместимости с Bootstrap версии 4.4.1 */
if (BootstrapVersion !== "4.4.1") {
console.error("Ошибка совместимости! Пришло время выпустить Кракена!");
}