Как создать вложенное меню каталога в верхней панели

Пример реализации есть на демо маркетплейс - https://marketplace.web-automation.ru/

Как реализовать подобное меню: 

1. В CommonStyle добавляем ссылку на CSS файл содержанием (/js/catmenu/catmenu.css):

.cat-menu {
    display: none;
    width: 200px;
}

.cat-menu-dropdown.show .cat-menu {
    display: block;
    position: absolute;
    z-index: 2;
}

    .cat-menu-dropdown.show .cat-menu > ul {
        margin-bottom: 0;
    }

.cat-menu-group {
    width: 200px;
    page-break-inside: avoid;
}

.cat-menu-additionalContent {
    width: 200px;
}

.cat-menu-groups {
    column-count: 3;
    column-gap: 10px;
}

.cat-menu-item-content {
    display: none;
    position: absolute;
    left: 200px;
    z-index: 99;
    top: 0px;
}

.cat-menu-item.show .cat-menu-item-content {
    display: block;
}

.cat-menu-item-label > a:hover {
    text-decoration: none;
}

.cat-menu-item.show .cat-menu-item-label {
    z-index: 100;
}

.cat-menu-img {
    max-width: 160px;
    max-height: 160px;
}
@media (max-width: 768px) {
    .cat-menu-item-content {
        position: static;
    }

    .cat-menu-groups {
        column-count: 1;
    }
}

2. В настройке CommonScripts добавляем скрипт (/js/catmenu/catmenu.js):

as.catMenu = {
    init: function () {
        $('.cat-menu-cont').removeClass('hide');
        $(document).on('click', '.cat-menu-dropdown-toggle', function () {
            let $dropdown = $('.cat-menu-dropdown');
            let $menuItems = $('.cat-menu-item');
            $dropdown.toggleClass('show');
            $menuItems.removeClass('show');
        });

        $(document).on('click', function (e) {
            let $dropdown = $('.cat-menu-dropdown');
            let $menuItems = $('.cat-menu-item');
            if (!$dropdown.has(e.target).length) {
                $dropdown.removeClass('show');
                $menuItems.removeClass('show');
            }
        });

        $(document).on('click', '.cat-menu-item-label', function () {
            let $menuItems = $('.cat-menu-item');
            let $item = $(this).closest('.cat-menu-item');
            $menuItems.not($item).removeClass('show');
            $item.toggleClass('show');
        });
    }
}

$(function () {
    as.catMenu.init();
});

3. Добавляем разметку через HTML блок в GetLayout SELECT 1 в параметр TopNavbarText

declare @catalogMenu2 nvarchar(max) =''
@catalogMenuTitle nvarchar(max) = ''

exec [dbo].[as_block]
		@code ='catalogMenu2',
		@itemID =0,
		@parameters = default,
		@res = @catalogMenu2  OUTPUT

select @catalogMenu2 TopNavbarText

4. Реализуем блок HTML (через SQL функцию блока): https://pastebin.com/iD0ivmcQ

Вариант чисто разметки без HTML блока: 

<div class="cat-menu-cont hide">
	<div class="cat-menu-dropdown position-relative d-inline-block">
    <a href="#" class="btn-sm mx-2 btn btn-light  d-inline-block cat-menu-dropdown-toggle"><i class="fas fa-bars"></i></a>
    <div class="cat-menu shadow-sm mt-1">
      <header class="p-2 bg-light font-weight-bold"><i class="fas fa-list"></i> Категории</header>
	  <ul class="list-unstyled position-relative">
        <li class="cat-menu-item border-bottom">
          <div class="cat-menu-item-label position-relative p-2 bg-white">
            <a href="#" class="text-dark"><i class="fas fa-mobile-alt"></i> Телефоны</a>
          </div>
          <div class="cat-menu-item-content shadow-sm bg-white">
            <div class="d-flex flex-wrap flex-md-nowrap">
              <ul class="list-unstyled cat-menu-groups p-2">
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 1</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 2</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 3</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 4</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 5</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 1</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 2</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 3</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 4</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 5</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
              </ul>
              <div class="cat-menu-additionalContent d-flex flex-wrap align-content-start">
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
              </div>
            </div>
          </div>
        </li>
        <li class="cat-menu-item">
          <div class="cat-menu-item-label position-relative p-2 bg-white">
            <a href="#" class="text-dark"><i class="fas fa-carrot"></i> Овощи</a>
          </div>
          <div class="cat-menu-item-content shadow-sm bg-white">
            <div class="d-flex flex-wrap flex-md-nowrap">
              <ul class="list-unstyled cat-menu-groups p-2">
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 6</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 7</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 8</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 9</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 10</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
              </ul>
              <div class="cat-menu-additionalContent d-flex flex-wrap align-content-start">
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
              </div>
            </div>
          </div>
        </li>
      </ul>


    </div>
  </div>
</div>

 

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом

Это быстрое внесение изменений

по ходу эксплуатации программы. Как создается функционал на платформе

Это простой удобный интерфейс

адаптация под мобильные устройства. Про юзабилити платформы

Нужна бесплатная консультация?
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.