Как создать вложенное меню каталога в верхней панели
Пример реализации есть на демо маркетплейс - 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
- Основные компоненты
- Возможности
- Коммуникация с пользователем
- Дизайн, стилизация
- Лендинги
- Универсальный API
- Примеры интеграций
- Каталоги
- Навигация HOWTO. Как быстро редактировать страницы и параметры компонентов HOWTO. Как можно в меню добавить динамические элементы (например Проекты)? HOWTO. Как настроить меню кабинета HOWTO. Как отключить свайп открытия меню Как добавить в хлебные крошки функциональные ссылки (модальную форму, модальную таблицу) Страницы. Как добавить хлебные крошки Как настроить меню на смартфонах снизу экрана Работа с меню Как создать вложенное меню каталога в верхней панели Как сделать хлебные крошки с выпадающим списком
- Документы
- Дополнительные компоненты
- Продвижение, SEO
- Системные моменты
- Системное администрирование
- HOWTO
- Таблицы
- Формы
- Загрузка файлов, картинок
- Работа с SQL
- HOWTO JS
- HOWTO Верстка
- Решение проблем
Falcon Space
Это снижение стоимости владения
за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом
Это быстрое внесение изменений
по ходу эксплуатации программы. Как создается функционал на платформе
Это простой удобный интерфейс
адаптация под мобильные устройства. Про юзабилити платформы
Нужна бесплатная консультация?
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.