Clases CSS de navegación en el CMS bluetronix: resumen y aplicación
En esta vista general encontrarás todas las clases CSS importantes de la navegación en el CMS de bluetronix. Aprende cómo con pocos ajustes puedes personalizar el diseño, la capacidad de respuesta y el comportamiento de tu estructura de menú.
Clases CSS de navegación Descripción
Aquí encontrarás un resumen compacto de qué clase CSS está destinada a cada elemento en tu snippet HTML. Así puedes ajustar rápidamente el diseño y el comportamiento.
Importante: es un marcador de posición de la tabla de navegación (por ejemplo, 00_Menue) y se reemplaza por clases propias al renderizar (por ejemplo, para visibilidad, resaltado, iconos por cada elemento de menú).
Resumen de clases
| Clase | Usado en | Propósito / Significado | Interacción típica |
|---|---|---|---|
bx-DesktopHTML1 |
div encima de la barra de navegación | Barra superior sobre el menú principal (por ejemplo, avisos, promociones, banner de la app). | Visibilidad controlada a través de marcadores de DB (none). |
bx-DesktopHTML2 |
div debajo de la barra de navegación | Barra inferior bajo el menú principal (información/insignias adicionales). | Visibilidad a través de none. |
bx-nav-outer |
Contenedor alrededor de nav.bx-nav |
Contenedor externo para posicionamiento (por ejemplo, sticky, sombra, ancho). | Marco de diseño para ancho completo. |
bx-nav |
nav Navegación principal | Navbar base (Grid/Flex, fondo, altura). | Estilos globales de la navbar y responsividad. |
bx-navbar-left |
Columna izquierda de la navbar | Área para el icono del menú (hamburguesa) y el logo. | Contiene .bx-nav-icon y .bx-nav-brand. |
bx-navbar-center |
Centro de la navbar | Contenedor para los elementos del menú (UL/LI) incluyendo submenús. | Rellena Mobile/Sidebar a través de JS (Fuente: #bxNavPoints). |
bx-navbar-right |
Columna derecha de la barra de navegación | Grupo de iconos (Buscar, Luz/Oscuro, Iniciar sesión, Idioma, Carrito, Barra lateral). | Los botones activan funciones JS (por ejemplo, BlueSearchBar()). |
bx-nav-icon |
botón / Botones de icono | Estilo unificado para todos los iconos de la barra de navegación. | Objetivos de clic para alternadores (Barra móvil, Barra lateral, Búsqueda, etc.). |
bx-nav-brand |
img Logo | Representación del logo (tamaño, márgenes). | A menudo con enlace a /index.html. |
bx-nav-item |
li en el menú principal | Elemento de lista de un elemento de menú. | Se puede combinar con .has-submenu. |
bx-nav-link |
a en el menú | Estilo del enlace del menú (fuente, hover, estados activos). | Recibe destino/nombre a través de un marcador de posición de DB. |
has-submenu |
li con dropdown | Marca un elemento de menú con submenú; activa estilos de dropdown. | Abre/Cierra el .bx-navbar-dropdown correspondiente. |
submenu-toggle |
botón junto al enlace | Elemento para expandir o contraer el submenú (icono de chevron). | Generalmente visible solo en pantallas más grandes (ver clases de utilidad). |
d-none, d-lg-inline |
Clases de utilidad en el botón | Control de visibilidad (por ejemplo, ocultar → mostrar inline a partir de lg). | Comportamiento responsivo del toggle. |
bx-menu |
ul en el desplegable | Lista de elementos del submenú. | Se llena a través de la navegación desde la base de datos. |
bx-navbar-dropdown |
ul (contenedor del desplegable) | Panel del desplegable (posicionamiento, sombra, animación). | Se abre al pasar el mouse/clicar o .submenu-toggle. |
bx-dropdown-item |
li en el desplegable | Elemento individual del submenú. | Contiene .bx-dropdown-link. |
bx-dropdown-link |
a en el desplegable | Estilo de enlace dentro del desplegable. | Estados de hover/focus para mejor usabilidad. |
bx-mobile-bar |
Menú móvil (Off-Canvas a la derecha) | Contenedor para navegación móvil y bloques opcionales arriba/abajo. | Se llena mediante JS (fuente: #bxNavPoints). |
bx-MobilHTML1, bx-MobilHTML2 |
Bloques en la barra móvil | Áreas HTML opcionales sobre/debajo del menú móvil (por ejemplo, logo). | Visibilidad a través de |
bx-side-bar |
Navegación lateral (Off-Canvas izquierda) | Contenedor para navegación alternativa/adicional. | Puede incluir el menú o contenido propio. |
bx-SideHTML1, bx-SideHTML2 |
Bloques en la barra lateral | Áreas HTML opcionales sobre/debajo del menú lateral (por ejemplo, gran logo). | Visibilidad a través de |
WKGBAnzDiv |
Contenedor del badge en el ícono del carrito | Área de contador envolvente (diseño/posición). | Incluye .WKGBAnzDivInner (cantidad). |
WKGBAnzDivInner |
Interior del badge | Muestra la cantidad actual del carrito. | Se llena mediante JS a través de #WKGBAnz. |
Clases de marcador de posición de la DB
| Marcador de posición | Descripción | Ejemplo |
|---|---|---|
|
Cada elemento de menú se reemplaza por una o más clases personalizadas (por ejemplo, only-desktop, highlight, icon-contact). | Controla la visibilidad/estilo por botón en escritorio, móvil o barra lateral. |
Combina .bx-nav-item con clases controladas por DB a través de , para mostrar u ocultar botones individuales en #bxNavPoints (escritorio), .bx-mobile-bar o .bx-side-bar, sin modificar el código HTML.
Preguntas Frecuentes
lo que los clientes nos preguntan con frecuencia
Aquí aprenderás cuáles clases CSS son responsables de la distribución, comportamiento y visibilidad en tu HTML de Navbar. Así podrás hacer ajustes específicos en la navegación.
¿Qué significa el marcador de posición ?
Este marcador de posición se reemplaza automáticamente por tus propias clases CSS que defines en la tabla de navegación (por ejemplo, 00_Menue). Así controlas la visibilidad, resaltado e íconos para cada elemento de menú.
¿Cómo puedo agregar contenido encima o debajo de la Navbar?
Utiliza las clases bx-DesktopHTML1 (arriba) y bx-DesktopHTML2 (abajo). Puedes mostrarlas u ocultarlas en el CMS a través de CMS ⯈ Página web ⯈ Encabezado.
¿Cuál es la función de la clase bx-nav-outer?
Es el contenedor exterior de la navegación. Así controlas el ancho, sombra o comportamiento fijo de la Navbar.
¿Qué significa bx-nav?
Esta clase define la navegación principal en sí misma, es decir, el diseño (por ejemplo, Flex/Grid), color de fondo y altura de la Navbar.
¿Cómo está dividida la Navbar en columnas?
La Navbar consiste en tres áreas: bx-navbar-left (logotipo e ícono del menú), bx-navbar-center (elementos del menú), bx-navbar-right (íconos como búsqueda, inicio de sesión, idioma, carrito de compras).
¿Qué hace la clase bx-nav-icon?
Proporciona un estilo uniforme para todos los íconos de la Navbar. Estos botones controlan, por ejemplo, la apertura de la Mobile-Bar, Side-Bar o la búsqueda.
¿Cómo puedo diseñar los enlaces del menú?
Con bx-nav-item defines los elementos de la lista, y con bx-nav-link las reglas de estilo para el texto, hover y estados activos de los enlaces.
¿Cómo funciona el control de submenús?
Un elemento de menú con la clase has-submenu contiene un menú desplegable. Con submenu-toggle (botón con ícono de flecha) puedes expandir o colapsar este menú.
¿Qué significan las clases de utilidad d-none y d-lg-inline?
Estas clases controlan la visibilidad de elementos individuales según el tamaño de pantalla, ideal para navegaciones responsivas.
¿Cómo está estructurado un menú desplegable?
Un menú desplegable consiste en bx-navbar-dropdown (contenedor), dentro de él bx-menu (lista) con bx-dropdown-item y bx-dropdown-link para los elementos de subpunto individuales.
¿Cómo funciona la barra móvil?
La bx-mobile-bar se abre en dispositivos móviles a la derecha como un menú Off-Canvas. Se llena con los contenidos de #bxNavPoints mediante JS. Puedes agregar bloques adicionales con bx-MobilHTML1 y bx-MobilHTML2.
¿Qué es la barra lateral?
La bx-side-bar es un menú lateral Off-Canvas (generalmente a la izquierda). Aquí puedes colocar tus propios contenidos o elementos de navegación, complementados por bx-SideHTML1 y bx-SideHTML2.
¿Cómo se muestra el contador del carrito?
El contenedor WKGBAnzDiv contiene WKGBAnzDivInner, que muestra la cantidad actual de artículos mediante JS (a través de #WKGBAnz) – generalmente como un distintivo en el ícono del carrito.
¿Cómo puedo mostrar botones individuales solo en ciertas áreas?
Combina .bx-nav-item con . Así puedes mostrar u ocultar botones específicamente en #bxNavPoints (Escritorio), .bx-mobile-bar o .bx-side-bar, sin cambiar el código HTML.