CSS-классы навигации в bluetronix CMS – обзор и применение
В этом обзоре вы найдете все важные CSS-классы навигации в CMS bluetronix. Узнайте, как с помощью небольших изменений индивидуализировать дизайн, отзывчивость и поведение вашей структуры меню.
CSS-классы навигации Описание
Здесь вы найдете компактный обзор того, какой CSS-класс в вашем HTML-фрагменте за что отвечает. Таким образом, вы можете быстро настраивать макет и поведение.
Важно: является заполнительным элементом из таблицы навигации (например, 00_Menue) и при рендеринге заменяется собственными классами (например, для видимости, выделения, иконок для каждого пункта меню).
Обзор классов
| Класс | Используется в | Назначение / Значение | Типичное взаимодействие |
|---|---|---|---|
bx-DesktopHTML1 |
div над навигационной панелью | Верхняя панель над главным меню (например, уведомления, промо, баннер приложения). | Видимость контролируется через DB-placeholder (none). |
bx-DesktopHTML2 |
div под навигационной панелью | Нижняя панель под главным меню (дополнительная информация/значки). | Видимость через none. |
bx-nav-outer |
Обертка для nav.bx-nav |
Внешний контейнер для позиционирования (например, фиксированный, тень, ширина). | Разметка рамки для полной ширины страницы. |
bx-nav |
nav Главная навигация | Базовая навигационная панель (Grid/Flex, фон, высота). | Глобальные стили навигационной панели и отзывчивость. |
bx-navbar-left |
Левая колонка навигационной панели | Область для значка меню (бургер) и логотипа. | Содержит .bx-nav-icon и .bx-nav-brand. |
bx-navbar-center |
Центр навигационной панели | Контейнер для пунктов меню (UL/LI) с подменю. | Заполняет мобильное/боковое меню через JS (Источник: #bxNavPoints). |
bx-navbar-right |
Правая колонка навигации | Группа иконок (Поиск, Светлая/Темная тема, Вход, Язык, Корзина, Боковая панель). | Кнопки вызывают JS-функции (например, BlueSearchBar()). |
bx-nav-icon |
button / Иконки-кнопки | Единый стиль для всех иконок навигации. | Цели клика для переключателей (Мобильная панель, Боковая панель, Поиск и т.д.). |
bx-nav-brand |
img Логотип | Отображение логотипа (Размер, Отступы). | souvent avec lien sur /index.html. |
bx-nav-item |
li в главном меню | Элемент списка пункта меню. | Можно комбинировать с .has-submenu. |
bx-nav-link |
a в меню | Стиль ссылки меню (Шрифт, Наведение, активные состояния). | Получает целевой/имя через DB-заполнитель. |
has-submenu |
li с выпадающим меню | Помечает пункт меню с подменю; активирует стили выпадающего меню. | Открывает/Закрывает соответствующее .bx-navbar-dropdown. |
submenu-toggle |
кнопка рядом со ссылкой | Элемент управления для раскрытия/сворачивания подменю (иконка Chevron). | Чаще всего виден только на больших экранах (см. утилитарные классы). |
d-none, d-lg-inline |
Утилитарные классы на кнопке | Управление видимостью (например, скрыть → показывать в строке на lg). | Адаптивное поведение переключателя. |
bx-menu |
ul в выпадающем меню | Список элементов подменю. | Заполняется навигацией из БД. |
bx-navbar-dropdown |
ul (контейнер выпадающего меню) | Выпадающая панель (позиционирование, тень, анимация). | Открывается по наведению/клику или .submenu-toggle. |
bx-dropdown-item |
li в выпадающем меню | Единственный элемент подменю. | Содержит .bx-dropdown-link. |
bx-dropdown-link |
a в выпадающем меню | Стиль ссылки внутри выпадающего меню. | Состояния при наведении/фокусе для лучшей удобства использования. |
bx-mobile-bar |
Мобильное меню (с выдвижной панелью справа) | Контейнер для мобильной навигации и опциональных блоков сверху/снизу. | Заполняется через JS (источник: #bxNavPoints). |
bx-MobilHTML1, bx-MobilHTML2 |
Блоки в мобильной панели | Опциональные HTML-области над/под мобильным меню (например, логотип). | Видимость через |
bx-side-bar |
Боковая навигация (Off-Canvas слева) | Контейнер для альтернативной/дополнительной навигации. | Может содержать меню или свои собственные материалы. |
bx-SideHTML1, bx-SideHTML2 |
Блоки в боковой панели | Опциональные HTML-области над/под боковым меню (например, большой логотип). | Видимость через |
WKGBAnzDiv |
Обертка бейджа в иконке корзины | Область счетчика (макет/позиция). | Содержит .WKGBAnzDivInner (количество). |
WKGBAnzDivInner |
Внутреннее содержимое бейджа | Отображает текущее количество в корзине. | Заполняется через JS по #WKGBAnz. |
Классы-placeholder из БД
| Заполнитель | Описание | Пример |
|---|---|---|
|
Каждый пункт меню заменяется одной или несколькими собственными классами (например, only-desktop, highlight, icon-contact). | Управляет видимостью/стилем для каждой кнопки на настольной версии, мобильной версии или боковой панели. |
Скомбинируйте .bx-nav-item с классами, управляемыми БД через , чтобы целенаправленно скрывать или отображать отдельные кнопки в #bxNavPoints (настольная версия), .bx-mobile-bar или .bx-side-bar, не меняя HTML-код.
Часто задаваемые вопросы
что часто спрашивают клиенты
Здесь вы найдете информацию о том, какие CSS-классы отвечают за макет, поведение и видимость в вашем HTML-меню навигации. Так вы сможете целенаправленно вносить изменения в навигацию.
Что означает заполнитель ?
Этот заполнитель автоматически заменяется собственными CSS-классами, которые вы определяете в таблице навигации (например, 00_Menue). Это позволяет вам управлять видимостью, выделением и иконками для отдельных пунктов меню.
Как я могу добавить контент над или под навигационной панелью?
Для этого используйте классы bx-DesktopHTML1 (сверху) и bx-DesktopHTML2 (снизу). Вы можете их скрывать или отображать в CMS через CMS ⯈ Веб-сайт ⯈ Заголовок.
Какова задача класса bx-nav-outer?
Он является внешним контейнером навигации. С помощью него вы управляете шириной, тенями или поведением навигационной панели.
Что означает bx-nav?
Этот класс определяет основную навигацию – то есть макет (например, Flex/Grid), цвет фона и высоту навигационной панели.
Как разделена навигационная панель на колонки?
Навигационная панель состоит из трех областей: bx-navbar-left (логотип и значок меню), bx-navbar-center (пункты меню), bx-navbar-right (иконки, такие как поиск, вход, язык, корзина).
Что делает класс bx-nav-icon?
Он обеспечивает единый стиль всех иконок навигационной панели. Эти кнопки, например, управляют открытием Mobile-Bar, Side-Bar или поиска.
Как я могу стилизовать ссылки меню?
С помощью bx-nav-item вы определяете элементы списка, а с помощью bx-nav-link – правила стиля для шрифта, наведения и активных состояний ссылок.
Как работает управление подменю?
Пункт меню с классом has-submenu содержит выпадающий список. С помощью submenu-toggle (кнопка с иконкой стрелки) вы можете развернуть или свернуть его.
Что означают классы утилит d-none и d-lg-inline?
Эти классы управляют видимостью отдельных элементов в зависимости от размера экрана – идеально подходит для адаптивной навигации.
Как устроено выпадающее меню?
Выпадающее меню состоит из bx-navbar-dropdown (контейнер), внутри которого bx-menu (список) с bx-dropdown-item и bx-dropdown-link для отдельных под пунктов.
Как работает мобильная панель?
bx-mobile-bar открывается на мобильных устройствах справа в виде Off-Canvas меню. Содержимое заполняется с помощью JS из #bxNavPoints. Дополнительные блоки можно добавить с помощью bx-MobilHTML1 и bx-MobilHTML2.
Что такое сайдбар?
bx-side-bar — это боковое Off-Canvas меню (обычно слева). Здесь можно разместить собственный контент или элементы навигации, дополняя с помощью bx-SideHTML1 и bx-SideHTML2.
Как отображается счетчик корзины?
Обертка WKGBAnzDiv содержит WKGBAnzDivInner, который через JS (по #WKGBAnz) отображает текущее количество товаров — обычно как значок в иконке корзины.
Как можно отображать отдельные кнопки только в определенных областях?
Комбинируй .bx-nav-item с . Так ты можешь целенаправленно включать или скрывать кнопки в #bxNavPoints (десктоп), .bx-mobile-bar или .bx-side-bar, не меняя HTML-код.