Lekce 21 - Bootstrap - Navigační lišta

V minulé lekci, Bootstrap - Navigace, jsme se naučili stylovat navigaci a to včetně záložek.

Znalosti z minulé lekce dnes využijeme při tvorbě navigační lišty. Pokračujeme v kurzu CSS frameworku Bootstrap.

Navigační lišta

Navbar je jedna z nejdůležitějších Bootstrap komponent a zároveň součást většiny layoutů. Jedná se o responzivní navigační lištu, která může obsahovat nejrůznější elementy a na mobilních zařízeních se "smrskne" do podoby tlačítka, otevírajícího svislé menu. Kromě navigace často lišty obsahují také logo, formuláře (např. pro vyhledávání na stránce), texty a tlačítka zobrazující další obsah.

Ukázka

Do ukázky si jako obvykle vložíme téměř vše co komponenta umí a poté si jednotlivé součásti podrobněji rozepíšeme. Pro správnou funkčnost mobilního menu a rozbalovacích tlačítek (Dropdowns) si opět nezapomeneme nalinkovat Bootstrap JavaScript plugin.

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">
        <img src="https://www.itnetwork.cz/images/5/css/bootstrap/twitter.png"  class="d-inline-block align-top" width="32" height="32" alt="Twitter" />
        obchod.cz
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#obsah-navigacni-listy" aria-controls="obsah-navigacni-listy" aria-expanded="false" aria-label="Rozbalit navigaci">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="obsah-navigacni-listy">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">O firmě <span class="sr-only">(aktuální)</span></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="produkty-dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Produkty
                </a>
                <div class="dropdown-menu" aria-labelledby="produkty-dropdown">
                    <a class="dropdown-item" href="#">Dílna</a>
                    <a class="dropdown-item" href="#">Kychyně</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Zahrada</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Ceník</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Vyhledat..." aria-label="Vyhledávání">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Vyhledat</button>
        </form>
    </div>
</nav>

Výsledek:

Kód si nyní popíšeme.

Navigační lišta

Začněme hezky po popořadě. Navigační lištu vytvoříme jak jinak, než elementem <nav> se třídou .navbar. Pro dosažení responzivity dodáme např. třídu .navbar-expand-lg, což způsobí zobrazení svislého menu místo lišty na zařízeních menších než velkých. V ukázce výše je pro účely článku použita třída .navbar-expand-md. Breakpointy, tedy jak přesně velké je které zařízení, jsme si zmínili v lekci Bootstrap - Typografie. Všimněte si, že responzivní menu je vytvořené pomocí Collapse.

Logo

Logo vkládáme do odkazu se třídou .navbar-brand. Pokud do odkazu vkládáme i obrázek, je mu třeba dodatečně nastavit rozměry a pomocí utility tříd zarovnání nahoru.

Responzivní tlačítko

Jako další prvek obvykle vkládáme tlačítko, které je viditelné pouze na mobilních zařízeních a slouží k rozbalení svislého menu. Jedná se o element <button> se třídou .navbar-toggler a data atributem data-toggle="collapse". Do data-target uvádíme selektor pro element reprezentující další obsah navigace, který má být na mobilních zařízeních právě ve výsuvném menu namísto v navigační liště. Na větších zařízeních bude tento obsah přítomen přímo v navigační liště. Tento element následuje dále jakožto element <div>.

Pokud je v navigaci příliš málo elementů a chceme je vyrovnat tak, aby se rozmístily rovnoměrně, můžeme navigaci přiřadit následující třídy: navbar navbar-light bg-light justify-content-between.

Obsah navigace

Jednotlivé části navigace vkládáme jako prvky seznamu <ul> se třídou .navbar-nav, který se roztahuje do šířky jak jen je to možné. Třída .mr-auto nastavuje pravý margin na hodnotu auto. Prvky navigace již máme vyzkoušené z lekce Bootstrap - Navigace. K odkazu na stránku, na které se právě nacházíme, bychom měli přidat třídu .active.

Inline formulář

Ani poslední inline formulář by pro vás již neměl být neznámý. Pro ně platí vše, co jsme si ukázali v obsáhlé dvoulekci o formulářích. Pokud bychom za sebe skládali více formulářových komponent různých velikostí, přiřadíme jim třídu .align-middle, aby se vycentrovaly na střed.

Stejně jako tomu bylo u navigací, i navigaci uvnitř navigační lišty můžeme přepsat tak, aby používala pouze elementy <a> a seznam <ul> vypustit. V takové navigaci ovšem nemůžeme používat Dropdown tlačítka.

Text

Libovolný text do navbaru vkládáme jako element <span> se třídou navbar-text. Text se tím svisle vycentruje.

Navigační lišty se skryjí v případě, že se stránku rozhodneme vytisknout. Pokud bychom chtěli, aby byla i navigační lišta součástí výtisku, přiřadíme ji třídu .d-print.

Barvy

Navigační lišta je připravena ve světlé i tmavé verzi, v závislosti na našem výběru liště přiřazujeme třídu .navbar-light, resp. .navbar-dark. Tato třída nastyluje tlačítko a barvy textu. Samotnou barvu lišty poté nastavíme přidáním nějaké další třídy z background utilities.

Navigační liště samozřejmě můžeme stejně tak dobře nastavit úplně jakoukoli barvu pozadí přes vlastní třídu nebo inline styl.

Pozicování

K pozicování navigační lišty můžeme použít position utilities. Zajímat nás bude zejména:

• Fixní pozice, kdy navigační lišta neroluje se stránkou, ale zůstává na pevné pozici. Tohoto chování dosáhneme přidáním třídy .fixed-top nebo .fixed-bottom, záleží zda lištu chceme mít přilepenou na horní nebo dolní straně stránky. Tuto funkci používá poměrně velké množství webů a uživatelům umožňuje používat navigační lištu kdekoli na stránce, bez nutnosti rolovat kvůli ní nahoru.
• Sticky pozice jsou rovněž velmi zajímavou novinkou, ale pozor, fungují pouze v nových prohlížečích (Podpora pro CSS vlastnost a hodnotu position: sticky). Tehdy se navigace chová jako klasický element, ale jakmile začneme scrollovat, přichytí se jako by byla její pozice fixní. Výhodou je, že takto můžeme nad navigaci umístit např. velké logo, které se stránkou poté odscrolluje, zatímcto navigace se k horní části obrazovky přilepí. Logo tedy na stránce nezabírá místo a navigace je stále při ruce. Pro toto chování navigační liště přiřadíme třídu .sticky-top.

V následujícím cvičení, Řešené úlohy k 20.-21. lekci Bootstrap CSS frameworku, si procvičíme nabyté zkušenosti z předchozích lekcí.