Редактор навигации в bluetronix CMS – индивидуальная настройка меню
В этом руководстве вы узнаете, как индивидуально настроить навигацию вашего сайта в CMS bluetronix. От структуры навбаров до мобильного меню — здесь вы шаг за шагом научитесь, как оптимально настроить свое меню.
Редактор навигации: Кастомизация меню сайтов
Эта документация покажет вам, как устроен навбар (навигация сайта) в CMS bluetronix и как его настроить. Вы будете проходить через структуру, заполнители (текстовые метки), мобильную и боковую панели, а также редактор навигации.
Примечание: Файл /bx_Header.html виден только в режиме разработчика (вход под AAadmin).
Расположение и видимость
По умолчанию навбар находится в основном каталоге по адресу Страницы → /bx_Header.html. Изменения в навигации вы вносите в этот файл.
Пример кода: /bx_Header.html
<div style="display:__DB_GB_DesktopHTML1_Display__" class="bx-DesktopHTML1"><!--bxEB_DSedit 00_Config DesktopHTML1 bxEB_DSedit-->
__DB_GB_DesktopHTML1__
</div>
<div class="bx-nav-outer">
<nav class="bx-nav">
<!-- left Icon logo -->
<div class="bx-navbar-left">
<div style="display:__DB_GB_DesktopNavIcon_Display__">
<button class="bx-nav-icon" id="BxMobileBarToggle">__DB_GB_DesktopNavIcon_SVG__</button>
</div>
<div style="display:__DB_GB_DesktopLogo_Display__;">
<a href="/index.html"><img src="__DB_GB_DesktopLogo_Src__" class="bx-nav-brand"></a>
</div>
</div>
<!-- center buttons -->
<div class="bx-navbar-center" id="bxNavPoints">
<!-- zusatz icon Menue-Editor - display:none -->
<div style="position:relative;display:none;"><div style="position:absolute;left:15px;top:-21px;width:35px;height:35px;z-index:100000;"><!--bxEB_Navi 00_Menue bxEB_Navi--></div></div>
<ul style="display:__DB_GB_DesktopNav_Display__">
<!--bxNV_DB 00_Menue bxNV_DB-->
<!--bxNV_Navi-->
<li class="bx-nav-item __DB_Nav_CSSclass__"><a class="bx-nav-link" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->
<li class="bx-nav-item has-submenu">
<a class="bx-nav-link __DB_Nav_CSSclass__" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a>
<button class="bx-nav-icon submenu-toggle d-none d-lg-inline" type="button"><span>__DB_GB_NavIconChevron_SVG__</span></button>
<ul class="bx-menu bx-navbar-dropdown" role="menu">
<!--bxNV_Next_Sub_Button-->
</ul>
</li>
<!--bxNV_Navi-->
<li class="bx-dropdown-item __DB_Nav_CSSclass__" role="none"><a class="bx-dropdown-link" role="menuitem" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->
</ul>
</div>
<!-- icons right -->
<div class="bx-navbar-right">
<div style="display:__DB_GB_DesktopIconSearch_Display__ ">
<button class="bx-nav-icon" onclick="BlueSearchBar();">__DB_GB_DesktopIconSearch_SVG__</button>
</div>
<div style="display:__DB_GB_DesktopIconLight_Display__">
<button class="bx-nav-icon" onclick="BlueLightDdark();">__DB_GB_DesktopIconLight_SVG__</button>
</div>
<div style="display:__DB_GB_DesktopIconLogin_Display__">
<button class="bx-nav-icon" onclick="BlueLoginBar();">__DB_GB_DesktopIconLogin_SVG__</button>
</div>
<div style="display:__DB_GB_DesktopIconLang_Display__">
<button class="bx-nav-icon" onclick="BlueLangBar();">__DB_GB_DesktopIconLang_SVG__</button>
</div>
<div style="display:__DB_GB_DesktopIconBasket_Display__">
<button class="bx-nav-icon" onclick="BlueBasketBar();">__DB_GB_DesktopIconBasket_SVG__<div class="WKGBAnzDiv"><div class="WKGBAnzDivInner" id="WKGBAnz"></div></div></button>
</div>
<div style="display:__DB_GB_DesktopIconSide_Display__">
<button class="bx-nav-icon" id="BxSideBarToggle">__DB_GB_DesktopIconSide_SVG__</button>
</div>
</div>
</nav>
</div>
<!-- Mobile Menü -->
<div class="bx-mobile-bar" id="BxMobileBar">
<div style="display:__DB_GB_MobilHTML1_Display__" class="bx-MobilHTML1"><!--bxEB_DSedit 00_Config MobilHTML1 bxEB_DSedit-->__DB_GB_MobilHTML1__</div>
<div id="bxNavPointsMobile" style="display:__DB_GB_MobilNav_Display__"></div>
<div style="display:__DB_GB_MobilHTML2_Display__" class="bx-MobilHTML2"><!--bxEB_DSedit 00_Config MobilHTML2 bxEB_DSedit-->__DB_GB_MobilHTML2__</div>
</div>
<!-- Sidebar -->
<div class="bx-side-bar" id="BxSideBar">
<div style="display:__DB_GB_SideHTML1_Display__" class="bx-SideHTML1"><!--bxEB_DSedit 00_Config SideHTML1 bxEB_DSedit-->__DB_GB_SideHTML1__</div>
<div id="bxNavPointsSide" style="display:__DB_GB_SideNav_Display__"></div>
<div style="display:__DB_GB_SideHTML2_Display__" class="bx-SideHTML2"><!--bxEB_DSedit 00_Config SideHTML2 bxEB_DSedit-->__DB_GB_SideHTML2__</div>
</div>
<div style="display:__DB_GB_DesktopHTML2_Display__" class="bx-DesktopHTML2"><!--bxEB_DSedit 00_Config DesktopHTML2 bxEB_DSedit-->
__DB_GB_DesktopHTML2__
</div>
Структура навбара
- Left Icon & Logo: Menü-Icon und Logo.
- Center Buttons: Menü-Buttons und Untermenüs.
- Icons Right: Funktions-Icons (z. B. Warenkorb, Suche, Sprache).
Понимание заполнителей (текстовых меток)
HTML-заполнители автоматически заменяются при сохранении в CMS:
__DB_GB_DesktopHTMLxxx_Display__: Steuert die Sichtbarkeit (Aktiv/Inaktiv) über CMS → Webseite → Kopfzeile.__DB_GB_DesktopHTMLxxx__: Wird durch Inhalte (z. B. HTML, Bild-URL, SVG) ersetzt, die Du in Kopfzeile hinterlegst.__DB_Nav_xxx__: Werte aus der Navigationstabelle (z. B. Link, Name, Ziel, CSS-Klasse).__DB_GB_xxx_SVG__: SVG-Code des jeweiligen Icons.
Если вы не хотите использовать параметры в заголовке CMS, вы можете удалить метки __DB_GB_xxx__ и __DB_GB_xxx_Display__ в HTML. Они являются необязательными.
Раздел: Верхний навбар
Дополнительная панель над меню прокручивается (телефон и десктоп) вверх за границу видимости. Сам навбар остается видимым в верхней части экрана в «липком» состоянии. Таким образом, важная информация (например, «Скачать приложение ...») может появиться сверху, не занимая постоянное место.
__DB_GB_DesktopHTML1_Display__: Aktiv/Inaktiv über CMS → Webseite → Kopfzeile.__DB_GB_DesktopHTML1__: HTML-Inhalt aus Kopfzeile.<!--bxEB_DSedit 00_Config DesktopHTML1 bxEB_DSedit-->: Editier-Button für den HTML-Eintrag.
Раздел: Нижний навбар
Дополнительная панель под меню также прокручивается (телефон и десктоп) вверх.
__DB_GB_DesktopHTML2_Display__: Aktiv/Inaktiv über CMS → Webseite → Kopfzeile.__DB_GB_DesktopHTML2__: HTML-Inhalt aus Kopfzeile.<!--bxEB_DSedit 00_Config DesktopHTML2 bxEB_DSedit-->: Editier-Button für den HTML-Eintrag.
Мобильное меню
Мобильный бар выезжает с правой стороны в телефонном режиме. При загрузке страницы JavaScript (/bx_script/BxScript_own_min.js) перенимает содержимое меню от bxNavPoints в мобильный бар (BxMobileBar). Дополнительно ты можешь вставлять собственные HTML-блоки над и под меню (например, большие логотипы).
<div class="bx-mobile-bar" id="BxMobileBar">
<div style="display:__DB_GB_MobilHTML1_Display__" class="bx-MobilHTML1"><!--bxEB_DSedit 00_Config MobilHTML1 bxEB_DSedit-->__DB_GB_MobilHTML1__</div>
<div id="bxNavPointsMobile" style="display:__DB_GB_MobilNav_Display__"></div>
<div style="display:__DB_GB_MobilHTML2_Display__" class="bx-MobilHTML2"><!--bxEB_DSedit 00_Config MobilHTML2 bxEB_DSedit-->__DB_GB_MobilHTML2__</div>
</div>
Боковая панель
Боковая панель выдвигается с левой стороны в режиме телефона. Здесь вы также можете разместить собственные HTML-блоки над/под меню (например, для больших логотипов). По желанию навигационное меню также можно отобразить в боковой панели.
<div class="bx-side-bar" id="BxSideBar">
<div style="display:__DB_GB_SideHTML1_Display__" class="bx-SideHTML1"><!--bxEB_DSedit 00_Config SideHTML1 bxEB_DSedit-->__DB_GB_SideHTML1__</div>
<div id="bxNavPointsSide" style="display:__DB_GB_SideNav_Display__"></div>
<div style="display:__DB_GB_SideHTML2_Display__" class="bx-SideHTML2"><!--bxEB_DSedit 00_Config SideHTML2 bxEB_DSedit-->__DB_GB_SideHTML2__</div>
</div>
Примечание по макету: Вы можете отображать выборочно мобильное меню или боковую панель справа/слева и менять иконки через CMS → Вебсайт → Заголовок.
Кнопки меню и подменю
<ul style="display:__DB_GB_DesktopNav_Display__">
<!--bxNV_DB 00_Menue bxNV_DB-->
<!--bxNV_Navi-->
<li class="bx-nav-item __DB_Nav_CSSclass__"><a class="bx-nav-link" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->
<li class="bx-nav-item has-submenu">
<a class="bx-nav-link __DB_Nav_CSSclass__" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a>
<button class="bx-nav-icon submenu-toggle d-none d-lg-inline" type="button"><span>__DB_GB_NavIconChevron_SVG__</span></button>
<ul class="bx-menu bx-navbar-dropdown" role="menu">
<!--bxNV_Next_Sub_Button-->
</ul>
</li>
<!--bxNV_Navi-->
<li class="bx-dropdown-item __DB_Nav_CSSclass__" role="none"><a class="bx-dropdown-link" role="menuitem" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->
</ul>
Структура меню создается с помощью UL/LI и заполняется из таблицы базы данных 00_Menue. С помощью тега <!--bxNV_DB 00_Menue bxNV_DB--> вы также можете указать другую таблицу.
Между <!--bxNV_Navi--> находятся HTML-шаблоны для основных и подпунктов. Тег <!--bxNV_Next_Sub_Button--> автоматически заполняется записями подпунктов.
Важно: Связь с функцией навигации CMS осуществляется через текстовые теги. Таким образом, можно полностью подключить настраиваемые шаблоны. Вы редактируете навигацию в подменю CMS (под Граница). Система автоматически создаёт страницы и каталоги – ручная привязка не требуется.
Настройка SVG-иконок
SVG-код иконок вы редактируете в режиме разработчика по адресу CMS → Вебсайт → Заголовок в нижней части.
Управление CSS и порядок
Порядок иконок можно изменить с помощью CSS. Мобильная панель может показываться справа или слева в зависимости от макета.
Советы и рекомендации
- In Kombination mit der Systemtabelle 00_Menue und CSS legst Du je Button fest, ob er in der Desktop-Navigation, der Mobile-Bar und/oder in der Side-Bar erscheint.
- In 00_Menue kann jedem Button eine CSS-Klasse in der Spalte CSSclass zugewiesen werden.
- Über CSS und die IDs
bxNavPoints,BxMobileBar,BxSideBarbestimmst Du, welche Buttons wo gerendert werden. So baust Du auch komplexe Navbar-Strukturen, die der Endkunde später selbst mit der CMS-Navigation verändern kann.
Дополнительная кнопка для редактора навигации
<!-- zusatz icon Menue-Editor - display:none -->
<div style="position:relative;display:none;"><div style="position:absolute;left:15px;top:-21px;width:35px;height:35px;z-index:100000;"><!--bxEB_Navi 00_Menue bxEB_Navi--></div></div>
С помощью этого вы включаете дополнительную кнопку редактирования в режиме редактирования. Заменив 00_Menue, вы можете указать другую таблицу навигации. Стандартный редактор навигации всегда использует 00_Menue.
Лучшие практики: Сохраняйте все элементы навигации вместе в /bx_Header.html. Таким образом, Мобильная панель, Боковая панель и Навигация для настольных ПК останутся последовательными, и замена источника данных (например, другой таблицы вместо 00_Menue) будет выполнена быстро.
Часто задаваемые вопросы
что часто спрашивают клиенты
Navbar находится в корневом каталоге по адресу Страницы ⯈ /bx_Header.html. Там вы можете внести все изменения в навигацию сайта.
Почему я не вижу файл /bx_Header.html?
Файл виден только в режиме разработчика. Для получения доступа войдите как AAdmin.
Как устроен Navbar?
Navbar состоит из трех основных областей: – Левая иконка и логотип: Иконка меню и логотип – Центральные кнопки: Основная навигация и подменю – Иконки справа: Иконки функций, такие как поиск, вход или корзина.
Что означают заполнители (текстовые теги) в HTML-коде?
Заполнители автоматически заменяются при сохранении в CMS. Например, none контролирует видимость элемента, в то время как вставляет фактическое содержание. Эти теги можно настроить в CMS ⯈ Вебсайт ⯈ Заголовок.
Могу ли я удалить текстовые теги?
Да, если вы не хотите использовать параметры заголовка CMS, можете просто удалить такие теги, как или . Они являются необязательными.
Как добавить содержимое выше и ниже Navbar?
В областях Navbar-Top и Navbar-Bottom вы можете активировать дополнительные панели. Они управляются через CMS ⯈ Вебсайт ⯈ Заголовок и заполняются HTML-содержимым.
Как работает мобильное меню?
В режиме телефона Мобильная панель выдвигается с правой стороны. Содержимое меню автоматически берется из настольного меню. Вы можете добавить дополнительные HTML-блоки, такие как логотипы, выше и ниже.
Как активировать боковую панель?
Боковая панель открывается в режиме телефона с левой стороны. Здесь также можно добавить собственные HTML-блоки. Отображение регулируется через CMS ⯈ Веб-сайт ⯈ Заголовок.
Могу ли я решить, будет ли навигация отображаться в боковой панели или мобильной панели?
Да, с помощью параметров макета вы можете выбрать, будет ли ваша навигация отображаться в боковой панели или мобильной панели. Также с помощью иконок можно указать, на какой стороне (слева/справа) она будет отображаться.
Как управляется меню в CMS?
Структура меню создается из системной таблицы 00_Menue. Вы можете редактировать её в CMS в разделе Край ⯈ Навигация. Страницы и подстраницы создаются автоматически.
Как я могу создать свои собственные шаблоны меню?
С помощью марки <!--bxNV_DB 00_Menue bxNV_DB--> вы можете указать другую таблицу в качестве источника данных. Таким образом, вы можете создать собственные навигации или шаблоны, связанные с навигацией CMS.
Как я могу изменить SVG-иконки?
Коды SVG иконок можно редактировать в разделе CMS ⯈ Веб-сайт ⯈ Заголовок в нижней части разработческого интерфейса.
Как я могу изменить порядок иконок в навигационной панели?
Порядок иконок можно настроить с помощью CSS. Позицию мобильной панели (справа или слева) также можно управлять с помощью CSS.
Как я могу определить, какие кнопки отображаются в настольной, мобильной или боковой панели?
С помощью таблицы 00_Menue вы можете назначить каждому элементу навигации имя CSS-класса. С помощью этих классов вы управляете отображением кнопки через CSS – например, в #bxNavPoints (настольный), #BxMobileBar (мобильный) или #BxSideBar (боковая панель).
Что делает дополнительная кнопка для редактора навигации?
Эта кнопка включает в режиме редактирования дополнительный редактор для элементов навигации. По умолчанию он использует таблицу 00_Menue, но вы также можете определить другую таблицу.
Какова рекомендуемая лучшая практика для навигации?
Соберите все элементы навигации в файле /bx_Header.html. Так вы сохраните синхронизацию меню для настольной, мобильной и боковой панелей и сможете быстро настраивать или заменять их при необходимости.