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

V minulej lekcii, Bootstrap - Navigácia, sme sa naučili štylovať navigáciu vrátane záložiek.

V dnešnom tutoriáli CSS frameworku Bootstrap využijeme pri tvorbe navigačnej lišty znalosti z minulej lekcie.

Navigačná lišta v Bootstrape

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

Do ukážky si ako zvyčajne vložíme takmer všetko, čo komponent dokáže 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äť musíme nalinkovať Bootstrap JavaScript plugin:

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">
        <img src="https://www.itnetwork.sk/images/5/css/bootstrap/bootstrap_eng/twitter.png" class="d-inline-block align-top" width="32" height="32" alt="Twitter" />
        shop.com
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Expand navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbar-content">
        <ul class="navbar-nav me-auto">
            <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">About Us <span class="visually-hidden">(current)</span></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="products-dropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Products
                </a>
                <div class="dropdown-menu" aria-labelledby="products-dropdown">
                    <a class="dropdown-item" href="#">Hobby</a>
                    <a class="dropdown-item" href="#">Kitchen</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Garden</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Pricelist</a>
            </li>
        </ul>
        <form class="d-flex my-2 my-lg-0">
            <input class="form-control me-2" type="search" placeholder="Search..." aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

Výsledok:

A teraz si kód popíšeme.

Navigačná lišta

Začnime pekne poporiadku. Navigačnú lištu vytvoríme elementom <nav> s triedou .navbar. Na dosiahnutie responzivity pridáme napríklad triedu .navbar-expand-lg, čo spôsobí zobrazenie zvislého menu namiesto lišty na zariadeniach menších ako veľkých. V ukážke vyššie je na účely článku použitá trieda .navbar-expand-md. Breakpointy, teda aké presne veľké je ktoré zariadenie, sme si spomenuli v lekcii Bootstrap - Typografia. Všimnime si, že responzívne menu je vytvorené pomocou Collapse z lekcie Bootstrap - Collapse a Accordion.

Logo

Logo vkladáme do odkazu s triedou .navbar-brand. Pokiaľ do odkazu vkladáme aj obrázok, je mu potrebné 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. Ide o element <button> s triedou .navbar-toggler a data atribútom data-bs-toggle="collapse". Do data-bs-target uvádzame selektor 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ácii priradiť nasledujúce triedy: navbar navbar-light bg-light justify-content-between.

Obsah navigácie

Jednotlivé časti navigácie vkladáme ako prvky zoznamu <ul> s triedou .navbar-nav, ktorý sa rozťahuje do šírky ako je to len možné. Trieda .me-auto nastavuje pravý margin na hodnotu auto. Prvky navigácie už poznáme 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 z lekcie Bootstrap - Formuláre by pre nás už nemal byť neznámy. Pre tie platí všetko, čo sme si už v tejto lekcii ukázali. Ak by sme za seba skladali viacero formulárových komponentov rôznych veľkostí, priradíme im triedu .align-middle, aby sa vycentrovali na stred.

Rovnako ako to bolo pri navigáciách, aj navigáciu vo vnútri navigačnej lišty môžeme prepísať tak, aby používala iba elementy <a> a zoznam <ul> vynechať. V takej navigácii však nemôžeme používať dropdown tlačidlá z lekcie Bootstrap - Dropdowns.

Text

Ľubovoľný text do navbaru vkladáme ako element <span> s triedou .navbar-text. Pomocou nej sa text zvisle vycentruje.

Navigačné 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 tlače, priradíme jej triedu .d-print.

Farby

Navigačná lišta je pripravená vo svetlej aj tmavej verzii, a v závislosti od nášho výberu lište priraďujeme triedu .navbar-light, respektíve .navbar-dark. Táto trieda naštýluje tlačidlo a farby textu. Samotnú farbu lišty potom nastavíme pridaním nejakej ďalšej triedy z background utilities, ktoré sme si predstavili v lekcii Bootstrap - Tabuľky:

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

Poziciovanie

Na poziciovanie navigačnej lišty použijeme position utilities. Zaujímať nás bude najmä:

• Fixná pozícia, kedy sa navigačná lišta neposúva so stránkou, ale zostáva na pevnej pozícii. Toto správanie dosiahneme pridaním triedy .fixed-top alebo .fixed-bottom, pričom 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 používateľom umožňuje používať navigačnú lištu kdekoľvek na stránke, bez nutnosti posúvať sa kvôli nej nahor.
• Sticky pozície sú tiež veľmi zaujímavé, ale pozor, fungujú iba v nových prehliadačoch (Podpora pre CSS vlastnosť a hodnotu position: sticky). Vtedy sa navigácia správa 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íklad veľké logo, ktoré sa stránkou potom odscrolluje, zatiaľ čo navigácia sa k hornej časti obrazovky prilepí. Logo teda na stránke nezaberá miesto a navigácia je stále po ruke. Pre takéto správanie navigačnej lište priradíme triedu .sticky-top.

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