Získej svůj iPhone v nové soutěži! Získej svůj iPhone v nové soutěži!
Nová překladatelská soutěž ITnetwork.cz o telefon iPhone, sluchátka Beats a další věcné ceny za 4 hodiny práce.
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

15. díl - Bootstrap - Navigace

HTML a CSS Bootstrap Bootstrap - Navigace

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Bootstrap - Dropdowns, jsme se věnovali rozbalovacím tlačítkům. 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:

Navigace v Bootstrap
navigace.html

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:

Navigace v Bootstrap
navigace_odka­zy.html

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:

Navigace v Bootstrap
navigace_svis­la.html

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.

Navigace v Bootstrap
navigace_zaloz­ky.html

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:

Navigace v Bootstrap
navigace_pilul­ky.html

Pokud bychom chtěli přidat i Dropdown, postupovali bychom stejně jako u záložek a využili bychom definici pomocí seznamu:

Navigace v Bootstrap
navigace_pilul­ky_dropdown.html

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:

Navigace v Bootstrap
navigace_dyna­micke_zalozky­.html

Všimněte si využití tříd .fade a .show k dosažení animace. Následuje zjednodušená verze s elementem <nav>:

Navigace v Bootstrap
navigace_dyna­micke_zalozky­.html

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:

Navigace v Bootstrap
navigace_dyna­micke_zalozky_pi­lls.html

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 ukážeme jak dnešní znalosti využít při tvorbě responzivní navigační lišty.


 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Předchozí článek
Bootstrap - Dropdowns
Miniatura
Všechny články v sekci
Bootstrap
Miniatura
Následující článek
Bootstrap - Navigační lišta
Aktivity (1)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!