21. diel - Bootstrap - Navigačné lišta

V minulej lekcii, Bootstrap - Navigácia , sme sa naučili stylovať navigáciu a to vrátane záložiek. Tieto znalosti dnes využijeme pri tvorbe navigačnej lišty. Pokračujeme v kurze CSS frameworku Bootstrap.

Navigačná lišta

Navbar je jedna z najdôležitejších Bootstrap komponentov a zároveň súčasť väčšiny layoutov. Jedná sa o responzívne navigačnú lištu, ktorá môže obsahovať najrôznejšie elementy a na mobilných zariadeniach sa "scvrkne" do podoby tlačidlá, otvárajúceho zvislé menu. Okrem navigácie často lišty obsahujú aj logo, formuláre (napr. Pre vyhľadávanie na stránke), texty a tlačidlá zobrazujúci ďalší obsah.

Ukážka

Do ukážky si ako zvyčajne vložíme takmer všetko čo komponenta vie a potom si jednotlivé súčasti podrobnejšie rozpíšeme. Pre správnu funkčnosť mobilného menu a rozbaľovacích tlačidiel (Dropdowns) si opäť nezabudneme nalinkovať 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ýsledok:

Kód si teraz popíšeme.

Navigačná lišta

Začnime pekne po poporiadku. Navigačné lištu vytvoríme ako inak, než elementom <nav> sa triedou .navbar. Pre dosiahnutie responzivity dodáme napr. Triedu .navbar-expand-lg, čo spôsobí zobrazenie zvislého menu miesto lišty na zariadeniach menších než veľkých. V ukážke vyššie je na účely článku použitá trieda .navbar-expand-md. Hraničnými, teda ako presne veľké je ktoré zariadenie, sme si spomenuli v lekcii Bootstrap - Typografia. Všimnite si, že responzívne menu je vytvorené pomocou Collapse.

Logo

Logo vkladáme do odkazu sa triedou .navbar-brand. Pokiaľ do odkazu vkladáme aj obrázok, mu treba dodatočne nastaviť rozmery a pomocou utility tried zarovnanie nahor.

Responzívne tlačidlo

Ako ďalší prvok obvykle vkladáme tlačidlo, ktoré je viditeľné iba na mobilných zariadeniach a slúži na rozbalenie zvislého menu. Jedná sa o element <button> sa triedou .navbar-toggler a dáta atribútom data-toggle="collapse". Do data-target uvádzame volič pre element reprezentujúci ďalší obsah navigácie, ktorý má byť na mobilných zariadeniach práve vo výsuvnom menu namiesto v navigačnej lište. Na väčších zariadeniach bude tento obsah prítomný priamo v navigačnej lište. Tento element nasleduje ďalej ako element <div>.

Pokiaľ je v navigácii príliš málo elementov a chceme ich vyrovnať tak, aby sa rozmiestnili rovnomerne, môžeme navigáciu priradiť nasledujúce triedy: navbar navbar-light bg-light justify-content-between.

Obsah navigácia

Jednotlivé časti navigácie vkladáme ako prvky zoznamu <ul> sa triedou .navbar-nav, ktorý sa rozťahuje do šírky ako len je to možné. Trieda .mr-auto nastavuje pravý margin na hodnotu auto. Prvky navigácia už máme vyskúšané z lekcie Bootstrap - Navigácia. K odkazu na stránku, na ktorej sa práve nachádzame, by sme mali pridať triedu .active.

Inline formulár

Ani posledná inline formulár by pre vás už nemal byť neznámy. Pre nich platí všetko, čo sme si ukázali v obsiahlej dvoulekci o formulároch. Ak by sme za seba skladali viac formulárových komponentov rôznych veľkostí, priradíme im triedu .align-middle, aby sa vycentroval na stred.

Rovnako ako tomu bolo pri navigáciou, aj navigáciu vnútri navigačnej lišty môžeme prepísať tak, aby používala iba elementy <a> a zoznam <ul> vypustiť. V takejto navigáciu však nemôžeme používať dropdown tlačidla.

Text

Ľubovoľný text do Navbar vkladáme ako element <span> sa triedou navbar-text. Text sa tým zvislo vycentruje.

Navigačnej lišty sa skryjú v prípade, že sa stránku rozhodneme vytlačiť. Ak by sme chceli, aby bola aj navigačná lišta súčasťou výtlačku, priradíme ju triedu .d-print.

Farby

Navigačná lišta je pripravená vo svetlej aj tmavej verzii, v závislosti na našom výbere lište priraďujeme triedu .navbar-light, resp. .navbar-dark. Táto trieda nastyluje tlačidlo a farby textu. Samotnú farbu lišty potom nastavíme pridaním nejaké ďalšie triedy z pozadia utilities.

Navigačné lište samozrejme môžeme rovnako tak dobre nastaviť úplne akúkoľvek farbu pozadia cez vlastnú triedu alebo inline štýl.

Pozíciovanie

K pozíciovanie navigačnej lišty môžeme použiť position utilities. Zaujímať nás bude najmä:

• Fixné pozície, kedy navigačná lišta neroluje so stránkou, ale zostáva na pevnej pozícii. Tohto správania dosiahneme pridaním triedy .fixed-top alebo .fixed-bottom, záleží či lištu chceme mať prilepenú na hornej alebo dolnej strane stránky. Túto funkciu používa pomerne veľké množstvo webov a užívateľom umožňuje používať navigačnú lištu kdekoľvek na stránke, bez nutnosti rolovať kvôli nej nahor.
• Sticky pozície sú tiež veľmi zaujímavou novinkou, ale pozor, fungujú iba v nových prehliadačoch (Podpora pre CSS vlastnosť a hodnotu position: sticky). Vtedy sa navigácia chová ako klasický element, ale akonáhle začneme scrollovať, prichytí sa ako by bola jej pozícia fixné. Výhodou je, že takto môžeme nad navigáciu umiestniť napr. Veľké logo, ktoré sa stránkou potom odscrolluje, zatímcto navigácia sa k hornej časti obrazovky prilepí. Logo teda na stránke nezaberá miesto a navigácia je stále pri ruke. Pre toto správanie navigačnej lište priradíme triedu .sticky-top.

V budúcej lekcii, Riešené úlohy k 20.-21. lekciu Bootstrap CSS frameworku , si popíšeme hneď niekoľko ďalších komponentov. Budú to paginace, Upozornenie a Drobečková navigácie.

V nasledujúcom cvičení, Riešené úlohy k 20.-21. lekciu Bootstrap CSS frameworku, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.