Éditeur de navigation dans le CMS bluetronix – personnaliser le menu

Name: Website builder App
Brand: bluetronix
Rating: 4.7 (831 reviews)

Dans ce guide, vous apprendrez comment personnaliser la navigation de votre site Web dans le CMS bluetronix. De la structure de la barre de navigation au menu mobile – vous apprendrez étape par étape comment configurer votre menu de manière optimale.

Emplacement & visibilité Exemple de code : <i>/bx_Header.html</i> Construction de la barre de navigation Section : Barre de navigation supérieure Section : Barre de navigation inférieure Menu mobile Barre latérale Boutons de menu & sous-menu Configurer les icônes SVG Contrôle CSS & ordre Astuces & conseils Bouton supplémentaire pour l'éditeur de navigation FAQ

Éditeur de navigation : personnalisation du menu du site Web

Cette documentation vous montre comment la barre de navigation (navigation du site Web) est construite dans le CMS bluetronix et comment vous pouvez l'ajuster. Vous serez guidé à travers la structure, les espaces réservés (balises de texte), le mobile et la barre latérale ainsi que l'éditeur de navigation.

Remarque : Le fichier /bx_Header.html n'est visible qu'en mode développeur (connexion en tant que AAdmin).

Emplacement & visibilité

Par défaut, la barre de navigation se trouve dans le répertoire principal sous Pages → /bx_Header.html. Vous effectuez les modifications de navigation dans ce fichier.

Exemple de code : /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).

Comprendre les espaces réservés (balises de texte)

Les espaces réservés HTML sont automatiquement remplacés lors de l'enregistrement dans le 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.

Si vous ne souhaitez pas utiliser les options dans l'en-tête du CMS, vous pouvez supprimer les marques __DB_GB_xxx__ et __DB_GB_xxx_Display__ dans le HTML. Elles sont optionnelles.

La barre supplémentaire au-dessus du menu défile (Téléphone & Bureau) vers le haut hors de la zone de visibilité. La véritable barre de navigation reste visible en haut de manière « collante ». Ainsi, des informations importantes (par exemple, « Télécharger l'application ... ») peuvent apparaître en haut sans bloquer définitivement de l'espace.

__DB_GB_DesktopHTML1_Display__: Aktiv/Inaktiv über CMS → Webseite → Kopfzeile.
__DB_GB_DesktopHTML1__: HTML-Inhalt aus Kopfzeile.
: Editier-Button für den HTML-Eintrag.

La barre supplémentaire sous le menu défile également (Téléphone & Bureau) vers le haut.

__DB_GB_DesktopHTML2_Display__: Aktiv/Inaktiv über CMS → Webseite → Kopfzeile.
__DB_GB_DesktopHTML2__: HTML-Inhalt aus Kopfzeile.
: Editier-Button für den HTML-Eintrag.

Menu mobile

La barre mobile apparaît en mode téléphone par la droite. Lors du chargement de la page, JavaScript (/bx_script/BxScript_own_min.js) reprend le contenu du menu de bxNavPoints dans la barre mobile (BxMobileBar). De plus, tu peux ajouter tes propres blocs HTML au-dessus et en dessous du menu (par exemple, de grands logos).


<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>

La barre latérale s'affiche en mode téléphone depuis le côté gauche. Ici également, tu peux positionner tes propres blocs HTML au-dessus/en dessous du menu (par exemple, pour de grands logos). En option, il est possible d'afficher le menu de navigation dans la barre latérale.


<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>

Remarque sur la mise en page : Tu peux choisir d'afficher le menu mobile ou la barre latérale à droite/gauche et échanger les icônes via CMS → Site Web → En-tête.

Boutons de menu & sous-menu



         <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>

La structure du menu est construite avec UL/LI et remplie à partir de la table de base de données 00_Menu. Avec la marque , tu peux également spécifier une autre table.

Entre  se trouvent les modèles HTML pour les éléments principaux et secondaires. La marque  est automatiquement remplie avec les entrées du sous-menu.

Important : La connexion à la fonction de navigation CMS se fait via les marques de texte. Ainsi, il est également possible d'intégrer complètement des modèles personnalisés. Tu peux modifier la navigation dans le sous-menu CMS (sous Bord). Les pages et répertoires sont créés automatiquement par le système – il n'est donc pas nécessaire de créer des liens manuellement.

Configurer les icônes SVG

Tu gères le code SVG des icônes dans la vue développeur de CMS → Site Web → En-tête dans la partie inférieure.

Contrôle CSS & ordre

Tu peux changer l'ordre des icônes avec CSS. La barre mobile peut apparaître à droite ou à gauche selon la mise en page.

Astuces & conseils

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, BxSideBar bestimmst 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.

Bouton supplémentaire pour l'éditeur de navigation

<!-- 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>

Ainsi, tu affiches un bouton d'édition supplémentaire en mode édition. En remplaçant 00_Menu, tu peux spécifier une autre table de navigation. L'éditeur de navigation par défaut utilise toujours 00_Menu.

Meilleure pratique : Regroupe tous les éléments de navigation dans /bx_Header.html. Ainsi, la barre mobile, la barre latérale et la barre de navigation sur bureau restent cohérentes, et le changement de la source de données (par exemple, une autre table que 00_Menu) se fait rapidement.

FAQ

ce que nos clients nous demandent souvent

Où puis-je trouver le fichier Navbar dans le CMS bluetronix ?

Le fichier Navbar se trouve dans le répertoire principal sous Pages ⯈ /bx_Header.html. Tu peux y apporter toutes les modifications concernant la navigation du site.

Pourquoi ne puis-je pas voir le fichier /bx_Header.html ?

Le fichier n'est visible qu'en mode développeur. Connecte-toi en tant que AAdmin pour y accéder.

Comment la Navbar est-elle structurée ?

La Navbar se compose de trois zones principales : – Icône gauche & logo : icône de menu et logo – Boutons centraux : navigation principale et sous-menus – Icônes droite : icônes de fonction comme recherche, connexion ou panier.

Que signifient les espaces réservés (marques de texte) dans le code HTML ?

Les espaces réservés sont automatiquement remplacés lors de l'enregistrement dans le CMS. Par exemple, none contrôle la visibilité d'un élément, tandis que insère le contenu réel. Tu peux configurer ces marques sous CMS ⯈ Site Web ⯈ En-tête.

Puis-je supprimer les marques de texte ?

Oui, si tu ne souhaites pas utiliser les options d'en-tête CMS, tu peux simplement supprimer des marques comme ou . Elles sont opcionales.

Comment puis-je ajouter du contenu au-dessus et en dessous de la Navbar ?

Via les zones Navbar-Haut et Navbar-Bas, tu peux activer des barres supplémentaires. Celles-ci sont gérées via CMS ⯈ Site Web ⯈ En-tête et remplies avec du contenu HTML.

Comment fonctionne le menu mobile ?

En mode téléphone, la barre mobile s'affiche depuis le côté droit. Le contenu du menu est automatiquement repris de celui du bureau. Tu peux ajouter des blocs HTML supplémentaires comme des logos au-dessus et en dessous.

Comment activer la barre latérale ?

La barre latérale s'ouvre en mode téléphone depuis la gauche. Ici, tu peux également ajouter tes propres blocs HTML. La présentation est contrôlée via CMS ⯈ Site Web ⯈ En-tête.

Puis-je décider si la navigation apparaît dans la barre latérale ou dans la barre mobile ?

Oui, via les options de mise en page, tu peux choisir si ta navigation s'affiche dans la barre latérale ou dans la barre mobile. De plus, tu peux déterminer la page (gauche/droite) sur laquelle elle apparaît à l'aide des icônes.

Comment le menu est-il géré dans le CMS ?

La structure du menu est générée à partir de la table système 00_Menue. Tu peux la modifier dans le CMS sous Bord ⯈ Navigation. Les pages et sous-pages sont créées automatiquement.

Comment puis-je créer mes propres modèles de menu ?

Avec la balise , tu peux indiquer une autre table comme source de données. Ainsi, tu peux créer tes propres navigations ou modèles liés à la navigation dans le CMS.

Comment modifier les icônes SVG ?

Les codes SVG des icônes peuvent être modifiés sous CMS ⯈ Site Web ⯈ En-tête dans la partie inférieure de la vue développeur.

Comment changer l'ordre des icônes dans la barre de navigation ?

Tu peux ajuster l'ordre des icônes via CSS. La position de la barre mobile (à droite ou à gauche) peut également être contrôlée par CSS.

Comment puis-je définir quels boutons apparaissent dans la barre de bureau, la barre mobile ou la barre latérale ?

Via la table 00_Menue, tu peux attribuer un nom de classe CSS à chaque navigation. Avec ces classes, tu contrôles via CSS où le bouton sera affiché – par exemple dans #bxNavPoints (Bureau), #BxMobileBar (Mobile) ou #BxSideBar (Barre latérale).

Que fait le bouton additionnel pour l'éditeur de navigation ?

Ce bouton affiche en mode édition un éditeur supplémentaire pour les éléments de navigation. Par défaut, il utilise la table 00_Menue, mais tu peux également définir une autre table.

Quelle est la meilleure pratique recommandée pour la navigation ?

Garde tous les éléments de navigation regroupés dans le fichier /bx_Header.html. Ainsi, les menus de bureau, mobile et latéraux restent synchronisés et peuvent être rapidement ajustés ou remplacés au besoin.