Classes CSS de navigation dans le CMS bluetronix – aperçu et application
Dans cet aperçu, tu trouveras toutes les classes CSS importantes de la navigation dans le CMS bluetronix. Apprends comment, avec peu d'ajustements, tu peux personnaliser le design, la réactivité et le comportement de ta structure de menu.
Classes CSS de navigation Description
Ici, tu trouveras un aperçu compact de ce à quoi sert quelle classe CSS dans ton extrait HTML. Cela te permet d'ajuster rapidement la mise en page et le comportement.
Important : est un espace réservé de la table de navigation (par exemple, 00_Menue) et sera remplacé par des classes propres lors du rendu (par exemple, pour la visibilité, la mise en évidence, les icônes par élément de menu).
Vue d'ensemble des classes
| Classe | Utilisé dans | But / Signification | Interaction typique |
|---|---|---|---|
bx-DesktopHTML1 |
div au-dessus de la Navbar | Barre supérieure au-dessus du menu principal (par exemple, notifications, promotions, bannières d'application). | Visibilité contrôlable via un espace réservé DB (none). |
bx-DesktopHTML2 |
div en dessous de la Navbar | Barre inférieure sous le menu principal (informations/badges supplémentaires). | Visibilité via none. |
bx-nav-outer |
Wrapper autour de nav.bx-nav |
Conteneur externe pour le positionnement (par exemple, Sticky, ombre, largeur). | Cadre de mise en page pour pleine largeur de page. |
bx-nav |
nav navigation principale | Navbar de base (Grid/Flex, arrière-plan, hauteur). | Styles globaux de la Navbar et réactivité. |
bx-navbar-left |
Colonne gauche de la Navbar | Zone pour l'icône de menu (Burger) et le logo. | Contient .bx-nav-icon et .bx-nav-brand. |
bx-navbar-center |
Centre de la Navbar | Conteneur pour les éléments de menu (UL/LI) y compris les sous-menus. | Complète Mobile/Sidebar via JS (Source: #bxNavPoints). |
bx-navbar-right |
Colonne droite de la barre de navigation | Groupe d'icônes (Recherche, Light/Dark, Connexion, Langue, Panier, Barre latérale). | Les boutons déclenchent des fonctions JS (par ex. BlueSearchBar()). |
bx-nav-icon |
button / Boutons icône | Style uniforme pour tous les icônes de la barre de navigation. | Cibles de clic pour les bascules (Barre mobile, Barre latérale, Recherche, etc.). |
bx-nav-brand |
img Logo | Affichage du logo (taille, espacements). | Souvent avec un lien vers /index.html. |
bx-nav-item |
li dans le menu principal | Élément de liste d'un point de menu. | Peut être combiné avec .has-submenu. |
bx-nav-link |
a dans le menu | Style du lien de menu (police, survol, états actifs). | Reçoit la cible/le nom via des espaces réservés DB. |
has-submenu |
li avec dropdown | Marque le point de menu avec sous-menu ; active les styles dropdown. | Ouvre/Ferme le .bx-navbar-dropdown associé. |
submenu-toggle |
Toggle de sous-menu | Élément pour déplier/replier le sous-menu (icône Chevron). | Visible principalement sur les écrans plus grands (voir les classes utilitaires). |
d-none, d-lg-inline |
Classes utilitaires sur le button | Contrôle de visibilité (par exemple, masquer → afficher en ligne à partir de lg). | Comportement réactif du toggle. |
bx-menu |
ul dans le dropdown | Liste des entrées de sous-menu. | Rempli par la navigation depuis la base de données. |
bx-navbar-dropdown |
ul (conteneur dropdown) | Panneau dropdown (positionnement, ombre, animation). | S'ouvre par survol/clic ou .submenu-toggle. |
bx-dropdown-item |
li dans le dropdown | Un seul élément de sous-menu. | Contient .bx-dropdown-link. |
bx-dropdown-link |
a dans le dropdown | Style de lien à l'intérieur du dropdown. | État de survol/focus pour une meilleure convivialité. |
bx-mobile-bar |
Menu mobile (off-canvas à droite) | Conteneur pour la navigation mobile et blocs optionnels en haut/en bas. | Rempli par JS (source : #bxNavPoints). |
bx-MobilHTML1, bx-MobilHTML2 |
Blocs dans la barre mobile | Zones HTML optionnelles au-dessus/en dessous du menu mobile (par exemple, logo). | Visibilité via |
bx-side-bar |
Navigation latérale (Off-Canvas gauche) | Conteneur pour une navigation alternative/supplémentaire. | Peut contenir le menu ou des contenus propres. |
bx-SideHTML1, bx-SideHTML2 |
Blocs dans la barre latérale | Zones HTML optionnelles au-dessus/en dessous du menu latéral (par exemple, grand logo). | Visibilité via |
WKGBAnzDiv |
Wrapper de badge dans l'icône du panier | Zone de compteur englobante (mise en page/position). | Inclut .WKGBAnzDivInner (quantité). |
WKGBAnzDivInner |
Intérieur du badge | Affiche la quantité actuelle dans le panier. | Rempli par JS via #WKGBAnz. |
Classes de substitut de la DB
| Substitut | Description | Exemple |
|---|---|---|
|
Remplacé par une ou plusieurs classes propres pour chaque élément de menu (par exemple, only-desktop, highlight, icon-contact). | Contrôle la visibilité/style par bouton sur bureau, mobile ou barre latérale. |
Combinez .bx-nav-item avec des classes contrôlées par la base de données via , pour afficher ou masquer des boutons spécifiques dans #bxNavPoints (bureau), .bx-mobile-bar ou .bx-side-bar sans modifier le code HTML.
FAQ
ce que nos clients nous demandent souvent
Ici, vous découvrirez quelles classes CSS dans votre HTML de barre de navigation sont responsables de la mise en page, du comportement et de la visibilité. Vous pourrez ainsi effectuer des ajustements ciblés sur la navigation.
Que signifie le placeholder ?
Ce placeholder est automatiquement remplacé par vos propres classes CSS que vous définissez dans le tableau de navigation (par ex. 00_Menue). Cela vous permet de contrôler la visibilité, la mise en évidence et les icônes pour chaque élément de menu.
Comment puis-je insérer du contenu au-dessus ou en dessous de la barre de navigation?
Utilisez les classes bx-DesktopHTML1 (en haut) et bx-DesktopHTML2 (en bas). Vous pouvez les afficher ou les masquer dans le CMS via CMS ⯈ Site Web ⯈ En-tête.
Quel est le rôle de la classe bx-nav-outer?
C'est le conteneur extérieur de la navigation. Cela vous permet de contrôler la largeur, l'ombre ou le comportement collant de la barre de navigation.
Que signifie bx-nav?
Cette classe définit la navigation principale elle-même – c'est-à-dire la mise en page (par ex. Flex/Grid), la couleur de fond et la hauteur de la barre de navigation.
Comment la barre de navigation est-elle divisée en colonnes?
La barre de navigation se compose de trois zones : bx-navbar-left (Logo & icône de menu), bx-navbar-center (éléments de menu), bx-navbar-right (icônes comme recherche, connexion, langue, panier).
Que fait la classe bx-nav-icon?
Elle assure un style uniforme pour toutes les icônes de la barre de navigation. Ces boutons permettent par exemple d'ouvrir Mobile-Bar, Side-Bar ou la recherche.
Comment puis-je styliser les liens de menu?
Avec bx-nav-item, vous définissez les éléments de liste, et avec bx-nav-link, les règles de style pour le texte, le survol et les états actifs des liens.
Comment fonctionne le contrôle des sous-menus?
Un élément de menu avec la classe has-submenu contient un menu déroulant. Avec submenu-toggle (bouton avec icône de flèche), vous pouvez le plier ou le déplier.
Que signifient les classes utilitaires d-none et d-lg-inline?
Ces classes contrôlent la visibilité des éléments selon la taille de l'écran – idéales pour les navigations responsives.
Comment est structuré un menu déroulant?
Un dropdown se compose de bx-navbar-dropdown (conteneur), à l'intérieur bx-menu (liste) avec bx-dropdown-item et bx-dropdown-link pour les sous-points.
Comment fonctionne la Mobile-Bar?
La bx-mobile-bar s'ouvre sur les appareils mobiles à droite en tant que menu Off-Canvas. Elle est remplie par JS avec le contenu de #bxNavPoints. Des blocs supplémentaires peuvent être ajoutés avec bx-MobilHTML1 et bx-MobilHTML2.
Qu'est-ce que la Side-Bar ?
La bx-side-bar est un menu Off-Canvas latéral (généralement à gauche). Ici, vous pouvez placer vos propres contenus ou éléments de navigation, complétés par bx-SideHTML1 et bx-SideHTML2.
Comment le compteur du panier est-il affiché ?
Le wrapper WKGBAnzDiv contient WKGBAnzDivInner, qui affiche le nombre actuel d'articles via JS (via #WKGBAnz) – généralement sous forme de badge sur l'icône du panier.
Comment puis-je afficher des boutons uniquement dans certaines zones ?
Combinez .bx-nav-item avec . Vous pouvez ainsi afficher ou masquer des boutons de manière ciblée dans #bxNavPoints (Bureau), .bx-mobile-bar ou .bx-side-bar sans modifier le code HTML.