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.