W3.CSS- navigatiebalken

W3.CSS Navigatiebalkklassen

W3.CSS biedt de volgende klassen voor navigatiebalken:

Basisnavigatie

De klasse w3-bar is een container voor het horizontaal weergeven van HTML-elementen.

De klasse w3-bar-item definieert de containerelementen.

Het is een perfect hulpmiddel voor het maken van navigatiebalken:

Responsieve navigatie

De klasse w3-mobile maakt alle balkelementen responsief (horizontaal op grote schermen en verticaal op kleine).

Gekleurde navigatiebalken

Gebruik een w3-kleurklasse om een ​​kleur aan de navigatiebalk toe te voegen:

Begrensde navigatiebalken

Gebruik een klasse w3-border of w3-kaart om randen toe te voegen rond de navigatiebalk of om deze als kaart weer te geven:

Actieve/huidige link

Voeg een w3-kleurklasse toe aan een link om deze te markeren:

Zweefbare links

Wanneer u met de muis over een knop gaat, verandert de achtergrondkleur in grijs.

Als je een andere achtergrondkleur wilt bij het aanwijzen, gebruik dan een van de w3-hover- kleurklassen :

Als u in plaats daarvan de tekstkleur wilt wijzigen, schakelt u het standaard zweefeffect uit met de klasse w3-hover-none en voegt u een klasse w3-hover-text toe .

Besteed wat tijd aan het spelen met verschillende zweefeffecten:

Rechts uitgelijnde links

Gebruik de klasse w3-right op een lijstitem om een ​​specifieke link rechts uit te lijnen:

Grootte navigatiebalk

Gebruik een klasse w3-grootte om de lettergrootte van de links in de navigatiebalk te wijzigen:

Gebruik een w3-padding- klasse om de opvulling van elke link in de navigatiebalk te wijzigen:

Opmerking: u kunt in plaats van elke knop ook opvulling aan de navigatiebalk toevoegen. Als u dit echter doet, moet u er rekening mee houden dat de links niet volledig worden opgevuld bij het aanwijzen:

Pas de breedte van de links aan met de CSS width eigenschap

( Opmerking : gebruik w3-mobile om de links te transformeren naar 100% breedte op kleine schermen):

Navigatiebalk met pictogrammen

Navigatiebalktekst

Als u tekst in plaats van knoppen in de navigatiebalk wilt, gebruikt u de klasse w3-bar-item om dezelfde opvulling te krijgen als de knoppen.

Navigatiebalk met ingangen en knoppen

Navigatiebalk met dropdown

Beweeg de muis over de "Dropdown" link:

Klikbare vervolgkeuzelijst

Gebruik w3-dropdown-click als u liever op de dropdown-link klikt in plaats van met de muisaanwijzer:

Horizontaal vervolgkeuzemenu

Verwijder de klasse w3-bar-block uit de dropdown-container als u wilt dat de dropdown-links horizontaal worden weergegeven in plaats van verticaal:

Responsieve navigatiebalk met responsieve vervolgkeuzelijst

Gebruik de klasse w3-mobile op alle links, inclusief de dropdown-container, om een ​​responsieve navigatiebalk met responsieve dropdown-links te maken.

Verklein het browservenster om het effect te zien:

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.