20. diel - Bootstrap - Navigácia
V predchádzajúcom cvičení, Riešené úlohy k 17.-19. lekciu Bootstrap CSS frameworku, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.
V minulej lekcii, Riešené úlohy k 17.-19. lekciu Bootstrap CSS frameworku , sme dokončili flex utilities. Dnes sa opäť ponoríme do hlbín CSS frameworku Bootstrap a v tutoriálu si popíšeme ako stylovať navigáciu.
Navigácia
Kedykoľvek budeme v našej prezentácii potrebovať navigáciu, nemusíme
pre štýly chodiť ďaleko. Bootstrap má pre nás pripravenú ako samostatnú
navigáciu, tak aj responzívne navigačnú lištu s vyjížděcím menu. V
dnešnej lekcii sa budeme venovať samostatné navigáciu, pre ktorú máme k
dispozícii triedu .nav
.
Ukážka
Ukážme si najprv ako komponenta vyzerá, k reprezentácii prvkov navigácie použijeme položky zoznamu:
<ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">O firmě</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Produkty</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Ceník</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Kontakt</a> </li> </ul>
Výsledok v prehliadači:
Prvkom navigácie priraďujeme triedu .nav-link
. Navigácia
nijako nepodporuje triedu .active
, ale môžeme použiť
.disabled
pre zneaktívnená niektorých položiek.
Element <nav>
a
zarovnanie
Okrem zoznamu môžeme použiť aj obyčajné odkazy bez ďalších
elementov, ktoré uzavrieme do elementu <nav>
, opäť sa
triedou .nav
. Rovno si ukážme aj ako položky v navigácii
zarovnať vodorovne. Keďže celá navigácia je postavená na flexboxu,
použijeme nám už známych flexbox utilít, konkrétne k zarovnanie na stred
triedu .justify-content-center
.
HTML kód:
<nav class="nav justify-content-center"> <a class="nav-link" href="#">O firmě</a> <a class="nav-link" href="#">Produkty</a> <a class="nav-link disabled" href="#">Ceník</a> <a class="nav-link" href="#">Kontakt</a> </nav>
A výsledok:
Pre zarovnanie vpravo by sme použili triedu
.justify-content-end
.
Zvislá navigácia
Ak by sme chceli navigáciu nastylovať ako zvislú, využijeme triedy
.flex-column
. Zvislé navigácia sa uplatní najmä na menších
displejoch, preto môžeme jednoducho navigáciu nastylovať aj ako vodorovnú
na počítačoch a zvislú na telefónoch. K tomu by sme využili napr. Triedy
.flex-sm-row
.
<ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="#">O firmě</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Produkty</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Ceník</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Kontakt</a> </li> </ul>
výsledok:
Opačného správanie by sme docielili triedou .flex-sm-column
,
kedy by bola navigácia zvislá na počítačoch a vodorovná na telefónoch.
Ako ďalšie by sme mohli využiť responzívne triedy ako
.text-sm-center
, ktorú by sme priradili položkám a tá by ich na
počítačoch centroval a na mobiloch, kde navigácia zvislá, by ich nechala
zarovnané vľavo ako zvislý zoznam.
Záložky
Navigáciu môžeme jednoducho nastylovať ako záložky pridaním triedy
.nav-tabs
. V tomto prípade je podporovaná aj trieda
.active
. K plnej funkcionalite treba nalinkovať aj javascriptový
plugin Bootstrap.
Všimnite si, že v jednej záložke je použité aj rozbaľovacej tlačidlo dropdown.
Pilulky
Podobne môžeme z odkazov spraviť aj "tabletky" pridaním triedy
.nav-pills
. Rovno si ukážeme využitie aj ďalšie triedy,
.nav-fill
, ktorá roztiahne obsah navigácie tak, aby vyplnil celú
jej šírku. Podobne existuje aj trieda .nav-justified
, ktorá by
mala tiež obsah navigácia roztiahnuť cez celú šírku, ale mala by každej
položke nastaviť rovnakú veľkosť. Túto triedu sa mi však nepodarilo
sprevádzkovať a pravdepodobne sa zatiaľ jedná o chybu v Bootstrap.
Ak by sme k definícii navigácie využili element <nav>
a
odkazy <a>
, teda skrátenú verziu bez zoznamu, všetkým
odkazom by sme priradzovali ešte triedu .nav-item
. Ukážme si
tento príklad:
Ak by sme chceli pridať aj dropdown, postupovali by sme rovnako ako u záložiek a využili by sme definíciu pomocou zoznamu:
Sémantika
Navigáciu pomocou zoznamu <ul>
by sme mali ideálne
priraďovať aj atribút role="navigation"
pre hlasové čítačky
alebo ju obaliť ešte do sémantického elementu <nav>
. Do
atribútu role
neuvádzame hodnoty tablist
,
tab
ani tabpanel
a to aj keď v navigácii záložky
používame, pretože tieto role slúžia pre dynamický obsah, ktorý záložky
prepínajú. Dynamické záložky by sme nemali kombinovať s dropdown
tlačidlami, pretože môže byť mätúce, že "aktivačné" tlačidlo nebude
hneď spočiatku viditeľné, ale bude schované spolu so záložkou. Navyše
zatiaľ neexistuje spôsob ako pomocou ARIA atribútov oznámiť hlasovým
čítačkám ako takú sústavu komponentov ovládať.
Dynamické záložky
Keďže sme dynamické záložky už niekoľkokrát spomenuli, poďme si ukázať ako je na navigáciu napojiť. Nezabudnite pripojiť JavaScript.
<ul class="nav nav-tabs" id="navigace" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="o-firme-tab" data-toggle="tab" href="#o-firme" role="tab" aria-controls="o-firme" aria-selected="true">O firmě</a> </li> <li class="nav-item"> <a class="nav-link" id="produkty-tab" data-toggle="tab" href="#produkty" role="tab" aria-controls="produkty" aria-selected="false">Produkty</a> </li> <li class="nav-item"> <a class="nav-link" id="kontakt-tab" data-toggle="tab" href="#kontakt" role="tab" aria-controls="kontakt" aria-selected="false">Kontakt</a> </li> </ul> <div class="tab-content" id="navigace-obsah"> <div class="tab-pane fade show active" id="o-firme" role="tabpanel" aria-labelledby="o-firme-tab">Obsah záložky O firmě...</div> <div class="tab-pane fade" id="produkty" role="tabpanel" aria-labelledby="produkty-tab">Obsah záložky Produkty...</div> <div class="tab-pane fade" id="kontakt" role="tabpanel" aria-labelledby="kontakt-tab">Obsah záložky Kontakt...</div> </div>
výsledok:
Všimnite si využitie tried .fade
a .show
k
dosiahnutiu animácie. Nasleduje zjednodušená verzia s elementom
<nav>
:
Navigáciu s dynamickými záložkami môžeme vytvoriť aj s pomocou
piluliek, stačí miesto triedy .nav-tabs
priradiť triedu
.nav-pills
. Ideálne by sme mali zmeniť aj hodnotu dáta atribútu
data-toggle
z tab
na pill
. Dokonca
môžeme záložky umiestniť aj vertikálne, tento príklad si ukážeme:
V ukážke je použitý responzívne grid, ktorý si podrobne vysvetlíme ďalej v kurze.
Javascript
Ako u väčšiny komponentov, aj u navigácia môžeme ovplyvňovať
správanie JavaScript pluginov. Ako vždy môžeme využívať k prispôsobeniu
správania buď dáta atribúty alebo k jednotlivým vlastnostiam pristupovať
cez JavaScriptu. Vlastnosti majú v JavaScripte rovnaké názve ako dáta
atribúty (bez prefixu data-
). Jedná sa o dáta atribút
data-toggle
s hodnotou tab
alebo
pill
.
Cez JavaScript by sme bez dáta atribútov inicializovala záložky ako:
$('#zalozky a').on('click', function (e) { e.preventDefault(); $(this).tab('show'); });
Metódy
Metóde tab()
môžeme odovzdať ako parameter 2 textové
hodnoty:
"show"
- Zobrazí záložku."dispoze"
- Zničí záložku.
$('#zalozky a[href="#produkty"]').tab('show') // Otevře záložku podle jména $('#zalozky a:first').tab('show') // Otevře první záložku $('#zalozky a:last').tab('show') // Otevře poslední záložku $('#zalozky li:eq(3) a').tab('show') // Otevře čtvrtou záložku (jsou číslované od 0)
Metódy sú asynchrónne a odovzdajú riadenie skôr, než dôjde naozaj k prepnutiu záložky! Je to z dôvodu prebiehajúcej animácie. Ak animácie (transition) práve prebieha, budú všetky volania metód ignorovaná.
Udalosti
Reagovať môžeme v JavaScripte aj na nasledujúce udalosti:
hide.bs.tab
- Zavolá sa na zrovna aktívne záložke, keď sa má zobraziť nová záložka.show.bs.tab
- Zavolá sa na záložke, ktorá sa má práve zobraziť, ale predtým, než je naozaj zobrazená.hidden.bs.tab
- Zavolá sa na záložke, ktorá bola predtým aktívna, už potom, čo došlo k prepnutiu.shown.bs.tab
- Zavolá sa na záložke, ktorá sa zrovna zobrazila.
Reakcia na udalosť by mohla vyzerať napr. Nasledovne:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { e.target // v této vlastnosti nalezneme aktuální záložku e.relatedTarget // v této vlastnosti nalezneme záložku, která byla aktivní předtím })
V budúcej lekcii, Bootstrap - Navigačné lišta , si ukážeme ako dnešné znalosti využiť pri tvorbe responzívne navigačnej lišty.