Для того, что бы на Bootstrap 4 и 5 сделать многоуровневое меню нужно в HTML разметке спроектировать наше меню
HTML
<div class="container-header4">
<div class="container-header4-content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
МЕНЮ
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">
Пункт субменю 1
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Пункт субсубменю 1</a></li>
<li><a class="dropdown-item" href="#">Пункт субсубменю 1</a></li>
<li><a class="dropdown-item" href="#">Пункт субсубменю 1</a></li>
<li><a class="dropdown-item" href="#">Пункт субсубменю 1</a></li>
<li><a class="dropdown-item" href="#">Пункт субсубменю 1</a></li>
<li><a class="dropdown-item" href="#">Пункт субсубменю 1</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">
Пункт субменю 2
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Пункт субсубменю 2</a></li>
<li><a class="dropdown-item" href="#">Пункт субсубменю 2</a></li>
<li><a class="dropdown-item" href="#">Пункт субсубменю 2</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">ДОСТАВКА И ОПЛАТА</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">РАЗМЕРЫ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">АКЦИИ И СКИДКИ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">КОНТАКТЫ</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
в CSS мы напишем стили для нашего меню, в main.js вставим небольшой код
JS
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
}
var $subMenu = $(this).next('.dropdown-menu');
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass('show');
});
return false;
});
Получаем многоуровневое меню для нашего сайта.
Что бы субменю выходило на правую сторону, напишем CSS код, который сделает это, а так же развернет указатель. Не забыть при этом к нашим ul субменю добавить класс "submenuright": <ul class="dropdown-menu submenuright">
CSS
.container-header4__menu nav.navbar .dropdown:hover > .dropdown-menu {
display: block;}
.container-header4__menu nav.navbar .dropdown-submenu:hover > .submenuright {
display: flex;
flex-wrap: wrap;}
Чтобы это работало только на ПК версиях экранов, и не работало на мобильных устройствах, так как там просто отсутствует нормальная работа события hover. Я рекомендую прописать ниже еще вот такой код:
CSS
@media only screen and (max-device-width: 992px){
nav.navbar .dropdown:hover .dropdown-menu{
display: none;
}
}