Navigaatio CSS-luokat bluetronix CMS:ssä – yleiskatsaus & sovellukset
Tässä yhteenvetotaulukossa löydät kaikki tärkeät navigoinnin CSS-luokat bluetronix CMS:ssä. Opettele, kuinka voit pienillä muutoksilla räätälöidä valikkorakenteesi muotoilua, responsiivisuutta ja käyttäytymistä.
Navigointi CSS-luokat Kuvaus
Täältä löydät tiiviin yhteenvedon, mitä CSS-luokkaa käytetään HTML-pätkässäsi ja mihin se on tarkoitettu. Näin voit nopeasti muokata asettelua ja käyttäytymistä.
Tärkeää: on paikkamerkki navigaatiotaulusta (esim. 00_Menue) ja se korvataan renderoinnin yhteydessä omilla luokilla (esim. näkyvyyden, korostuksen, kuvakkeiden osalta).
Luokkayhteenveto
| Luokka | Käytetään | Tarkoitus / Merkitys | Tyypillinen vuorovaikutus |
|---|---|---|---|
bx-DesktopHTML1 |
div navbareiden yläpuolella | Yläkaista päävalikon yläpuolella (esim. ilmoitukset, promootio, sovellusbanneri). | Näkyvyys DB-paikkamerkin avulla (none). |
bx-DesktopHTML2 |
div navbareiden alapuolella | Alakaista päävalikon alapuolella (lisätiedot/merkinnät). | Näkyvyys none kautta. |
bx-nav-outer |
Kääre nav.bx-nav:n ympärillä |
Ulkoinen säiliö asemoimiseen (esim. Sticky, varjo, leveys). | Asettelu-kehys koko sivun leveydelle. |
bx-nav |
nav päänavigation | Perus-navbar (Grid/Flex, tausta, korkeus). | Globaalit navbar-tyylit ja responsiivisuus. |
bx-navbar-left |
Navbarin vasen sarake | Alue valikkokuvakkeelle (burger) ja logolle. | Sisältää .bx-nav-icon ja .bx-nav-brand. |
bx-navbar-center |
Navbarin keskikohta | Säiliö valikkokohdille (UL/LI) mukaan lukien alivalikot. | Täyttää Mobile/Sidebarin JS:n avulla (Lähde: #bxNavPoints). |
bx-navbar-right |
Navbar-oikea sarake | Ikoniryhmä (Haku, Vaalea/Pimeä, Kirjaudu, Kieli, Ostoskori, Sivupalkki). | Painikkeet laukaisevat JS-toimintoja (esim. BlueSearchBar()). |
bx-nav-icon |
painike / Ikonipainikkeet | Yhtenäinen tyyli kaikille Navbar-ikoille. | Klikkaustavoitteet toggleille (Mobile-Bar, Side-Bar, Haku jne.). |
bx-nav-brand |
img Logo | Logon esitys (koko, väli). | Usein linkittää /index.html. |
bx-nav-item |
li päävalikossa | Valikkokohteen listaelementti. | Voidaan yhdistää .has-submenu-luokkaan. |
bx-nav-link |
a valikossa | Valikon linkin tyyli (Fontti, Hover, aktiiviset tilat). | Saadaan kohde/nimi DB-paikkamerkin kautta. |
has-submenu |
li alasvetovalikolla | Merkitsee kohteen, jolla on alasvetovalikko; aktivoituu alasvetotyylit. | Aukoo/Sulkee siihen liittyvän .bx-navbar-dropdown. |
submenu-toggle |
painike linkin vieressä | Alimenun avaus-/sulkemispainike (Chevron-ikoni). | Näkyy yleensä vain suuremmilla näytöillä (ks. utility-luokat). |
d-none, d-lg-inline |
Utility-luokat painikkeessa | Näkyvyyden hallinta (esim. piilota → näyttö lg inline). | Togglin responsiivinen käyttäytyminen. |
bx-menu |
ul pudotusvalikossa | Alimenun kohdelista. | Täytetään tietokannan navigaatiolla. |
bx-navbar-dropdown |
ul (Pudotusvalikon säiliö) | Pudotuspaneeli (paikannus, varjo, animaatio). | Aukeaa hiiren ylläpidolla/napsautuksella tai .submenu-toggle. |
bx-dropdown-item |
li pudotusvalikossa | Yksittäinen alimenuelementti. | Sisältää .bx-dropdown-link. |
bx-dropdown-link |
a pudotusvalikossa | Linkki-tyyli pudotusvalikossa. | Hover-/Focus-tilat paremman käytettävyyden vuoksi. |
bx-mobile-bar |
Mobiilivalikko (Off-Canvas oikealla) | Astia mobiilinavigaatiolle ja valinnaiset lohkot ylhäällä/alhaalla. | Täytetään JS:n kautta (Lähde: #bxNavPoints). |
bx-MobilHTML1, bx-MobilHTML2 |
Lohkot mobiilivalikossa | Valinnaiset HTML-alueet mobiilivalikon ylä/alaa (esim. logo). | Näkyvyys |
bx-side-bar |
Sivunavigaatio (Off-Canvas vasemmalla) | Astia vaihtoehtoiselle/lisänavigaatiolle. | Voi sisältää valikon tai omia sisältöjä. |
bx-SideHTML1, bx-SideHTML2 |
Lohkot sivupalkissa | Valinnaiset HTML-alueet sivuvalikon ylä/alaa (esim. suuri logo). | Näkyvyys |
WKGBAnzDiv |
Badge-kääre ostoskori-ikonissa | Ympäröivä laskuri-alue (muoto/positio). | Sisältää .WKGBAnzDivInner (määrä). |
WKGBAnzDivInner |
Badge-sisus | Näyttää nykyisen ostoskorin määrän. | Täytetään JS:n kautta #WKGBAnz. |
Paikkamerkkiluokat tietokannasta
| Paikkamerkki | Kuvaus | Esimerkki |
|---|---|---|
|
Jokainen valikkokohta voidaan korvata yhdellä tai useammalla omalla luokalla (esim. only-desktop, highlight, icon-contact). | Hallinnoi näkyvyyttä/tyyliä napin mukaan työpöytä-, mobiili- tai sivupalkissa. |
Yhdistä .bx-nav-item DB-ohjattuihin luokkiin , jotta voit kohdistaa yksittäiset painikkeet #bxNavPoints (työpöytä), .bx-mobile-bar tai .bx-side-bar piilottamiseen tai näyttämiseen ilman, että HTML-koodia tarvitsee muuttaa.
UKK
mitä asiakkaat meiltä usein kysyvät
Täällä opit, mitkä CSS-luokat ovat vastuussa navbar-HTML:ssä asettelusta, toiminnasta ja näkyvyydestä. Näin voit tehdä tarkkoja mukautuksia navigaatioon.
Mitä tarkoittaa paikkamerkki ?
Tämä paikkamerkki korvataan automaattisesti omilla CSS-luokilla, jotka määrität navigointitaulukossa (esim. 00_Menue). Tällä ohjaat näkyvyyttä, korostusta ja kuvakkeita yksittäisille valikkokohdille.
Miten voin lisätä sisältöä navbarin ylle tai alle?
Käytä tähän luokkia bx-DesktopHTML1 (ylhäällä) ja bx-DesktopHTML2 (alhaalla). Voit näyttää tai piilottaa ne CMS:ssä kohdassa CMS ⯈ Verkkosivusto ⯈ Otsikko.
Mikä on luokan bx-nav-outer tehtävä?
Se on navigaation ulkoinen säiliö. Tällä ohjaat navbarin leveyttä, varjoa tai kiinteää käyttäytymistä.
Mitä tarkoittaa bx-nav?
Tämä luokka määrittelee pääreitin – siis asettelun (esim. Flex/Grid), taustavärin ja navbarin korkeuden.
Miten navbar on jaettu sarakkeisiin?
Navbar koostuu kolmesta osasta: bx-navbar-left (Logo & valikkokuvake), bx-navbar-center (valikkokohdat), bx-navbar-right (kuvakkeet kuten haku, kirjautuminen, kieli, ostoskori).
Mitä tekee luokka bx-nav-icon?
Se huolehtii kaikkien navbar-kuvakkeiden yhdenmukaisesta tyylistä. Nämä painikkeet hallitsevat esimerkiksi Mobiilivalikkoa, Sivupalkkia tai hakua.
Miten voin muotoilla valikkolinkkejä?
Luokalla bx-nav-item määrittelet listaelementit, ja luokalla bx-nav-link tyylisäännöt tekstiä, hover-tiloja ja aktiivisia tiloja varten linkeille.
Miten alivalikoita hallitaan?
Valikkokohta, jolla on luokka has-submenu, sisältää pudotusvalikon. submenu-toggle (painike, jossa on nuolikuvake) avaa tai sulkee sen.
Mitä tarkoittavat apuluokat d-none ja d-lg-inline?
Nämä luokat hallitsevat yksittäisten elementtien näkyvyyttä näytön koon mukaan – täydellinen responsiivisille navigaatioille.
Miten pudotusvalikko on rakennettu?
Pudotusvalikko koostuu bx-navbar-dropdown (säiliö), sen sisällä bx-menu (lista) bx-dropdown-item ja bx-dropdown-link yksittäisille alakohtille.
Miten Mobile-Bar toimii?
bx-mobile-bar avautuu mobiililaitteilla oikealla Off-Canvas-valikkona. Sen sisältö täytetään JS:n avulla #bxNavPoints:sta. Lisälohkoja voit lisätä bx-MobilHTML1 ja bx-MobilHTML2:n avulla.
Mikä on Side-Bar?
bx-side-bar on sivusuuntainen Off-Canvas-valikko (yleensä vasemmalla). Sinä voit sijoittaa omia sisältöjä tai navigointielementtejä, täydentäen bx-SideHTML1 ja bx-SideHTML2.
Miten ostoskori-laskuri esitetään?
Wrapper WKGBAnzDiv sisältää WKGBAnzDivInner:n, joka JS:n (kautta #WKGBAnz) avulla näyttää nykyisten artikkeleiden määrän – yleensä merkkinä ostoskorikuvakkeessa.
Miten voin näyttää yksittäisiä painikkeita vain tietyillä alueilla?
Yhdistä .bx-nav-item :n kanssa. Näin voit tarkasti näyttää tai piilottaa painikkeita #bxNavPoints (työpöytä), .bx-mobile-bar tai .bx-side-bar ilman HTML-koodin muuttamista.