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

Пример реализации есть на демо маркетплейс - 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

SQL-инструмент для создания личных кабинетов на сайте

Суть подхода и история создания Falcon Space
Веб-платформа для создания личных кабинетов

Платформа Falcon Space

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

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

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

по ходу эксплуатации программы

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

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

Веб-приложения на MS SQL. Партнерская программа для разработчиков и веб-студий

Вы можете разрабатывать самостоятельно или сотрудничать с нами в плане веб-разработки на платформе Falcon Space, используя только SQL и HTML.
Смотреть примеры с кодом SQL
Документация по платформе
Работа на MS SQL Server

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