Bootstrap 4 Navbar Multi-level Dropdowns (многоуровневое меню)

По умолчанию Bootstrap 4 Navbar поддерживает из коробки 2х уровневое меню, и этого не всегда хватает. В данном примере покажу как расширить функционал Navbar - сделаем его многоуровневым с выпадением меню при наведении мышки.

За основу возьмем стандартный код Bootstrap 4 Navbar и расширим его на несколько уровней, в итоге получаем следующую html разметку меню

<nav class="navbar navbar-expand-lg navbar-light bg-light" id="main_navbar">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-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="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Главная</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">О компании</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
              <ul class="dropdown-menu">
                <li class="nav-item dropdown">
                  <a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li class="nav-item dropdown">
                      <a class="dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
                      <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li>
                  <hr class="dropdown-divider" />
                </li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control me-2" type="search" placeholder="Поиск" aria-label="Search"/>
            <button class="btn btn-outline-success" type="submit">Искать</button>
          </form>
        </div>
</nav>

Далее добавим немного css, для оформления выпадающих списков:

.dropdown-menu{margin-top:0}
.dropdown-menu .dropdown-toggle::after{vertical-align:middle;border-left:4px solid;border-bottom:4px solid transparent;border-top:4px solid transparent}
.dropdown-menu .dropdown .dropdown-menu{left:100%;top:0;margin:0 20px;border-width:0}
.dropdown-menu .dropdown .dropdown-menu.left{right:100%;left:auto}
@media (min-width: 768px) {
.dropdown-menu .dropdown .dropdown-menu{margin:0;border-width:1px}
.dropdown-menu > li a:hover,.dropdown-menu > li.show{background:#007bff;color:#fff}
.dropdown-menu > li.show > a{color:#fff}
}

И чтобы все это заработало, необходимо добавить немного кода (jQuery):

(function($) {
    var defaults={
        sm : 540,
        md : 720,
        lg : 960,
        xl : 1140,
        navbar_expand: 'lg',
        animation: true,
        animateIn: 'fadeIn',
    };
    $.fn.bootnavbar = function(options) {

        var screen_width = $(document).width();
        settings = $.extend(defaults, options);

        if(screen_width >= settings.lg){
            $(this).find('.dropdown').hover(function() {
                $(this).addClass('show');
                $(this).find('.dropdown-menu').first().addClass('show');
                if(settings.animation){
                    $(this).find('.dropdown-menu').first().addClass('animated ' + settings.animateIn);
                }
            }, function() {
                $(this).removeClass('show');
                $(this).find('.dropdown-menu').first().removeClass('show');
            });
        }

        $('.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;
        });
    };
})(jQuery);
$(function () {
    $('#main_navbar').bootnavbar();
});

Здесь есть инициализация анимации, если она вам нужна, то необходимо подключить билиотеку 

В итоге получаем вот такое меню:

Демо

Скачать

Помочь проекту