Classes CSS de navegação no CMS bluetronix – visão geral e aplicação
Nesta visão geral, você encontrará todas as classes CSS importantes da navegação no CMS bluetronix. Aprenda como com poucas adaptações você pode personalizar o design, a responsividade e o comportamento da sua estrutura de menu.
Classes CSS de navegação Descrição
Aqui você encontrará uma visão compacta de qual classe CSS em seu snippet HTML serve para o quê. Assim, você pode ajustar rapidamente o layout e o comportamento.
Importante: é um espaço reservado da tabela de navegação (por exemplo, 00_Menu) e é substituído por suas próprias classes durante a renderização (por exemplo, para visibilidade, destaque, ícones por item de menu).
Visão geral das classes
| Classe | Usado em | Propósito / Significado | Interação típica |
|---|---|---|---|
bx-DesktopHTML1 |
div acima da Navbar | Barra superior acima do menu principal (por exemplo, avisos, promoções, banner de aplicativo). | Visibilidade controlável através de marcador de DB (none). |
bx-DesktopHTML2 |
div abaixo da Navbar | Barra inferior abaixo do menu principal (informações/badges adicionais). | Visibilidade através de none. |
bx-nav-outer |
Wrapper em nav.bx-nav |
Container externo para posicionamento (por exemplo, sticky, sombra, largura). | Estrutura de layout para largura total da página. |
bx-nav |
nav navegação principal | Navbar base (Grid/Flex, fundo, altura). | Estilos globais da Navbar e responsividade. |
bx-navbar-left |
Coluna esquerda da Navbar | Área para ícone do menu (hambúrguer) e logo. | Contém .bx-nav-icon e .bx-nav-brand. |
bx-navbar-center |
Centro da Navbar | Container para os itens do menu (UL/LI) incluindo submenus. | Preenche o Mobile/Sidebar via JS (Fonte: #bxNavPoints). |
bx-navbar-right |
Coluna direita da Navbar | Grupo de ícones (Buscar, Claro/Escuro, Login, Idioma, Carrinho, Barra lateral). | Botões acionam funções JS (por exemplo, BlueSearchBar()). |
bx-nav-icon |
botão / Botões de ícone | Estilo uniforme para todos os ícones da Navbar. | Objetivos de clique para alternâncias (Barra móvel, Barra lateral, Busca, etc.). |
bx-nav-brand |
img Logo | Apresentação do logo (tamanho, espaçamentos). | Frequentemente com link para /index.html. |
bx-nav-item |
li no menu principal | Elemento de lista de um item de menu. | Pode ser combinado com .has-submenu. |
bx-nav-link |
a no menu | Estilo do link do menu (fonte, hover, estados ativos). | Recebe destino/nome via placeholders do DB. |
has-submenu |
li com dropdown | Destaca item de menu com submenu; ativa estilos de dropdown. | Abre/fecha o .bx-navbar-dropdown correspondente. |
submenu-toggle |
botão ao lado do link | Elemento para abrir/fechar o submenu (ícone Chevron). | Geralmente visível apenas em telas maiores (ver classes utilitárias). |
d-none, d-lg-inline |
Classes utilitárias no botão | Controle de visibilidade (por exemplo, ocultar → mostrar inline a partir de lg). | Comportamento responsivo do Toggle. |
bx-menu |
ul no dropdown | Lista de entradas do submenu. | Preenchido pela navegação do banco de dados. |
bx-navbar-dropdown |
ul (container do dropdown) | Painel dropdown (posicionamento, sombra, animação). | Abre por hover/clique ou .submenu-toggle. |
bx-dropdown-item |
li no dropdown | Entrada única do submenu. | Contém .bx-dropdown-link. |
bx-dropdown-link |
a no dropdown | Estilo de link dentro do dropdown. | Estados de hover/foco para melhor usabilidade. |
bx-mobile-bar |
Menu móvel (Off-Canvas à direita) | Container para navegação mobile e blocos opcionais acima/abaixo. | É preenchido via JS (Fonte: #bxNavPoints). |
bx-MobilHTML1, bx-MobilHTML2 |
Blocos na barra móvel | Áreas HTML opcionais acima/abaixo do menu móvel (por exemplo, logotipo). | Visibilidade através de |
bx-side-bar |
Navegação lateral (Off-Canvas esquerda) | Container para navegação alternativa/adicional. | Pode conter o menu ou conteúdos próprios. |
bx-SideHTML1, bx-SideHTML2 |
Blocos na barra lateral | Áreas HTML opcionais acima/abaixo do menu lateral (por exemplo, logotipo grande). | Visibilidade através de |
WKGBAnzDiv |
Wrapper de badge no ícone do carrinho | Área do contador envolvente (Layout/Posição). | Inclui .WKGBAnzDivInner (Quantidade). |
WKGBAnzDivInner |
Interior do badge | Mostra a quantidade atual no carrinho. | É preenchido via JS através de #WKGBAnz. |
Classes de espaço reservado do DB
| Espaço reservado | Descrição | Exemplo |
|---|---|---|
|
Cada item de menu é substituído por uma ou mais classes personalizadas (por exemplo, only-desktop, highlight, icon-contact). | Controla a visibilidade/estilo por botão na área de trabalho, móvel ou barra lateral. |
Combine .bx-nav-item com classes controladas pelo DB através de para exibir ou ocultar botões específicos em #bxNavPoints (Desktop), .bx-mobile-bar ou .bx-side-bar, sem ajustar o código HTML.
FAQ
o que os clientes nos perguntam frequentemente
Aqui você descobrirá quais classes CSS em seu HTML de Navbar são responsáveis pelo layout, comportamento e visibilidade. Assim, você pode fazer ajustes específicos na navegação.
O que significa o espaço reservado ?
Este espaço reservado é automaticamente substituído por classes CSS personalizadas que você define na tabela de navegação (por exemplo, 00_Menue). Com isso, você controla a visibilidade, destaque e ícones para itens individuais do menu.
Como posso inserir conteúdos acima ou abaixo da Navbar?
Use as classes bx-DesktopHTML1 (cima) e bx-DesktopHTML2 (baixo) para isso. Você pode exibi-las ou ocultá-las no CMS em CMS ⯈ Website ⯈ Cabeçalho.
Qual é a função da classe bx-nav-outer?
Ela é o contêiner externo da navegação. Assim, você controla a largura, sombra ou comportamento sticky da Navbar.
O que significa bx-nav?
Esta classe define a navegação principal em si – ou seja, o layout (por exemplo, Flex/Grid), cor de fundo e altura da Navbar.
Como a Navbar está dividida em colunas?
A Navbar consiste em três áreas: bx-navbar-left (Logotipo & Ícone do menu), bx-navbar-center (Itens do menu), bx-navbar-right (Ícones como Buscar, Login, Idioma, Carrinho).
O que faz a classe bx-nav-icon?
Ela garante um estilo uniforme para todos os ícones da Navbar. Estes botões controlam, por exemplo, a abertura da Mobile-Bar, Side-Bar ou a busca.
Como posso estilizar os links do menu?
Com bx-nav-item você define os itens da lista, com bx-nav-link as regras de estilo para fonte, hover e estados ativos dos links.
Como funciona o controle de submenus?
Um item de menu com a classe has-submenu contém um dropdown. Com submenu-toggle (botão com ícone de seta) você pode expandir ou recolher isso.
O que significam as classes utilitárias d-none e d-lg-inline?
Essas classes controlam a visibilidade de elementos individuais conforme o tamanho da tela – ideal para navegações responsivas.
Como é estruturado um menu dropdown?
Um dropdown consiste em bx-navbar-dropdown (contêiner), dentro bx-menu (lista) com bx-dropdown-item e bx-dropdown-link para os itens individuais.
Como funciona a Mobile-Bar?
A bx-mobile-bar abre em dispositivos móveis à direita como um menu Off-Canvas. Ela é preenchida via JS com os conteúdos de #bxNavPoints. Você pode adicionar blocos adicionais com bx-MobilHTML1 e bx-MobilHTML2.
O que é a Side-Bar?
A bx-side-bar é um menu lateral Off-Canvas (geralmente à esquerda). Aqui você pode colocar seus próprios conteúdos ou elementos de navegação, complementados por bx-SideHTML1 e bx-SideHTML2.
Como o contador de carrinho é exibido?
O wrapper WKGBAnzDiv contém WKGBAnzDivInner, que exibe a quantidade atual de itens via JS (através de #WKGBAnz) – geralmente como um badge no ícone do carrinho.
Como posso exibir botões individuais apenas em determinadas áreas?
Combine .bx-nav-item com . Assim, você pode mostrar ou ocultar botões especificamente em #bxNavPoints (Desktop), .bx-mobile-bar ou .bx-side-bar, sem alterar o código HTML.