W3.CSS Navigasiebalke

W3.CSS Navigasiebalkklasse

W3.CSS bied die volgende klasse vir navigasiebalke:

Basiese navigasie

Die w3-bar- klas is 'n houer om HTML-elemente horisontaal te vertoon.

Die w3-bar-item klas definieer die houer elemente.

Dit is 'n perfekte hulpmiddel om navigasiebalke te skep:

Responsiewe navigasie

Die w3-mobiele klas laat enige staafelemente reageer (horisontaal op groot skerms en vertikaal op klein).

Gekleurde navigasiebalke

Gebruik 'n w3-kleur klas om 'n kleur by die navigasiebalk te voeg:

Begrensde navigasiebalke

Gebruik 'n w3-border- of w3-card- klas om grense rondom die navigasiebalk by te voeg, of om dit as 'n kaart te vertoon:

Aktiewe/huidige skakel

Voeg 'n w3-kleur klas by 'n skakel om dit uit te lig:

Beweegbare skakels

Wanneer jy oor 'n knoppie beweeg, sal die agtergrondkleur na grys verander.

As jy 'n ander agtergrondkleur op hover wil hê, gebruik enige van die w3-sweef- kleurklasse :

As jy eerder die tekskleur wil verander, skakel die verstek-sweef-effek af met die w3-sweef-geen- klas, en voeg 'n w3-sweef-teksklas by .

Spandeer tyd om met verskillende hover-effekte rond te speel:

Regs-belynde skakels

Gebruik die w3-regs klas op 'n lysitem om 'n spesifieke skakel regs te belyn:

Navigasiebalkgrootte

Gebruik 'n w3-grootte klas om die lettergrootte van die skakels binne die navigasiebalk te verander:

Gebruik 'n w3-opvulklas om die opvulling van elke skakel binne die navigasiebalk te verander:

Let wel: Jy kan ook opvulling by die navigasiebalk voeg, in plaas van elke knoppie. As jy dit egter doen, let daarop dat die skakels nie volle opvulling kry wanneer jy beweeg nie:

Pas die breedte van die skakels aan met die CSS-breedte-eienskap

( Let wel : Gebruik w3-mobile om die skakels na 100% breedte op klein skerms te transformeer):

Navigasiebalk met ikone

Navigasiebalk teks

As jy teks in plaas van knoppies binne die navigasiebalk wil hê, gebruik die w3-bar-item klas om dieselfde vulling as die knoppies te kry.

Navbar met insette en knoppies

Navigasiebalk met aftreklys

Beweeg die muis oor die "Dropdown"-skakel:

Klikbare aftreklys

Gebruik w3-dropdown-click as jy verkies om op die dropdown-skakel te klik in plaas van om te beweeg:

Horisontale aftreklys

Verwyder die w3-bar-block klas uit die aftrekhouer as jy wil hê dat die aftrekskakels horisontaal in plaas van vertikaal moet vertoon:

Responsive Navbar met Responsive Dropdown

Gebruik die w3-mobiele klas op alle skakels, insluitend die aftrekhouer om 'n responsiewe navigasiebalk met responsiewe aftrekskakels te skep.

Verander die grootte van die blaaiervenster om die effek te sien:

Fixed Navigation Bar

To force the navigation bar to stay at the top or at the bottom of the page, even when the user scrolls the page, wrap a <div> element around the bar and add the w3-top or w3-bottom class:

Vertical Navigation Bar

The w3-bar-block class is a container for displaying HTML elements vertically.

Collapsing the Navigation Bar

When the navigation bar takes up too much space on a small screen, and you do not want to display it vertically by default, you can use hide and show classes on specific links in the navigation bar.

In the example below, the navigation bar is replaced with a button (☰) in the top right corner when shown on tablets and mobile devices. When the button is clicked, the links in the navigation bar will vertically stack:

Side Navigation

The w3-sidebar class creates a side navigation:

Go to the next chapter to learn more about the side navigation.