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.

K aktivovaniu určitej záložky použijeme bež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)

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.