Lekce 20 - Bootstrap - Navigace
V předešlém cvičení, Řešené úlohy k 17.-19. lekci Bootstrap CSS frameworku, jsme si procvičili nabyté zkušenosti z předchozích lekcí.
Dnes se opět ponoříme do hlubin CSS frameworku Bootstrap a v tutoriálu si popíšeme jak stylovat navigaci.
Navigace
Kdykoli budeme v naší prezentaci potřebovat navigaci, nemusíme pro styly
chodit daleko. Bootstrap má pro nás připravenou jak samostatnou navigaci, tak
i responzivní navigační lištu s vyjížděcím menu. V dnešní lekci se
budeme věnovat samostatné navigaci, pro kterou máme k dispozici třídu
.nav
.
Ukázka
Ukažme si nejprve jak komponenta vypadá, k reprezentaci prvků navigace použijeme položky seznamu:
<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ýsledek v prohlížeči:
Prvkům navigace přiřazujeme třídu .nav-link
. Navigace nijak
nepodporuje třídu .active
, ale můžeme použít
.disabled
pro zneaktivnění některých položek.
Element <nav>
a zarovnání
Kromě seznamu můžeme použít i obyčejné odkazy bez dalších elementů,
které uzavřeme do elementu <nav>
, opět se třídou
.nav
. Rovnou si ukažme i jak položky v navigaci zarovnat
vodorovně. Jelikož celá navigace je postavena na flexboxu, použijeme nám
již známých flexbox utilit, konkrétně k zarovnání na střed třídu
.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ýsledek:
Pro zarovnání vpravo bychom použili třídu
.justify-content-end
.
Svislá navigace
Pokud bychom chtěli navigaci nastylovat jako svislou, využijeme třídy
.flex-column
. Svislé navigace se uplatní zejména na menších
displejích, proto můžeme jednoduše navigaci nastylovat i jako vodorovnou na
počítačích a svislou na telefonech. K tomu bychom využili např. třídy
.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ýsledek:
Opačného chování bychom docílili třídou .flex-sm-column
,
kdy by byla navigace svislá na počítačích a vodorovná na telefonech. Jako
další bychom mohli využít responzivní třídy jako
.text-sm-center
, kterou bychom přiřadili položkám a ta by je na
počítačích centrovala a na mobilech, kde je navigace svislá, by je nechala
zarovnané vlevo jako svislý seznam.
Záložky
Navigaci můžeme jednoduše nastylovat jako záložky přidáním třídy
.nav-tabs
. V tomto případě je podporovaná i třída
.active
. K plné funkcionalitě je třeba nalinkovat i
javascriptový plugin Bootstrapu.
Všimněte si, že v jedné záložce je použito i rozbalovací tlačítko Dropdown.
Pilulky
Podobně můžeme z odkazů udělat i "pilulky" přidáním třídy
.nav-pills
. Rovnou si ukážeme využití i další třídy,
.nav-fill
, která roztáhne obsah navigace tak, aby vyplnil celou
její šířku. Podobně existuje i třída .nav-justified
, která
by měla také obsah navigace roztáhnout přes celou šířku, ale měla by
každé položce nastavit stejnou velikost. Tuto třídu se mi ovšem
nepodařilo zprovoznit a pravděpodobně se zatím jedná o chybu v
Bootstrapu.
Pokud bychom k definici navigace využili element <nav>
a
odkazy <a>
, tedy zkrácenou verzi bez seznamu, všem odkazům
bychom přiřazovali ještě třídu .nav-item
. Ukažme si tento
příklad:
Pokud bychom chtěli přidat i Dropdown, postupovali bychom stejně jako u záložek a využili bychom definici pomocí seznamu:
Sémantika
Navigaci pomocí seznamu <ul>
bychom měli ideálně
přiřazovat i atribut role="navigation"
pro hlasové čtečky nebo
ji obalit ještě do sémantického elementu <nav>
. Do
atributu role
NEuvádíme hodnoty tablist
,
tab
ani tabpanel
a to i když v navigaci záložky
používáme, protože tyto role slouží pro dynamický obsah, který záložky
přepínají. Dynamické záložky bychom neměli kombinovat s Dropdown
tlačítky, protože může být matoucí, že "aktivační" tlačítko nebude
hned zpočátku viditelné, ale bude schované spolu se záložkou. Navíc
zatím neexistuje způsob jak pomocí ARIA atributů sdělit hlasovým
čtečkám jak takovou soustavu komponent ovládat.
Dynamické záložky
Jelikož jsme dynamické záložky již několikrát zmínili, pojďme si ukázat jak je na navigaci napojit. Nezapomeňte připojit 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ýsledek:
Všimněte si využití tříd .fade
a .show
k
dosažení animace. Následuje zjednodušená verze s elementem
<nav>
:
Navigaci s dynamickými záložkami můžeme vytvořit i s pomocí pilulek,
stačí místo třídy .nav-tabs
přiřadit třídu
.nav-pills
. Ideálně bychom měli změnit i hodnotu data atributu
data-toggle
z tab
na pill
. Dokonce
můžeme záložky umístit i vertikálně, tento příklad si ukážeme:
V ukázce je použit responzivní grid, který si podrobně vysvětlíme dále v kurzu.
JavaScript
Jako u většiny komponent, i u navigace můžeme ovlivňovat chování
JavaScript pluginů. Jako vždy můžeme využívat k uzpůsobení chování
buď data atributy nebo k jednotlivým vlastnostem přistupovat přes
JavaScriptu. Vlastnosti mají v JavaScriptu stejné názvu jako data atributy
(bez prefixu data-
). Jedná se o data atribut
data-toggle
s hodnotou tab
nebo pill
.
Přes JavaScript bychom bez data atributů inicializovali záložky jako:
$('#zalozky a').on('click', function (e) { e.preventDefault(); $(this).tab('show'); });
Metody
Metodě tab()
můžeme předat jako parametr 2 textové
hodnoty:
"show"
- Zobrazí záložku."dispoze"
- Zničí záložku.
K aktivování určité záložky použijeme běžný jQuery selektor:
$('#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)
Metody jsou asynchronní a předají řízení dříve, než dojde opravdu k přepnutí záložky! Je to z důvodu probíhající animace. Pokud animace (transition) právě probíhá, budou veškerá volání metod ignorována.
Události
Reagovat můžeme v JavaScriptu i na následující události:
hide.bs.tab
- Zavolá se na zrovna aktivní záložce, když se má zobrazit nová záložka.show.bs.tab
- Zavolá se na záložce, která se má zrovna zobrazit, ale předtím, než je opravdu zobrazena.hidden.bs.tab
- Zavolá se na záložce, která byla dříve aktivní, již poté, co došlo k přepnutí.shown.bs.tab
- Zavolá se na záložce, která se zrovna zobrazila.
Reakce na událost by mohla vypadat např. takto:
$('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 příští lekci, Bootstrap - Navigační lišta, si dokončíme téma navigace.
Komentáře
Zatím nikdo nevložil komentář - buď první!