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 Bootstrap komponentov 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 "smrskne" do podoby tlačidla, otvárajúceho zvislé menu. Okrem navigácie často lišty 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 obvykle 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äť 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.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:

Kód si teraz popíšeme.

Navigačná lišta

Začnime pekne po porade. Navigačnú lištu vytvoríme elementom <nav> s triedou .navbar. Na dosiahnutie responzivity dodá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 zmienili v lekcii Bootstrap - Typografie. 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 zarovnania 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áciu 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ž 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 z lekcie Bootstrap - Formuláre by pre nás už nemal byť neznámy. Pre nich 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 tomu 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> vypustiť. 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, v závislosti na našom výbere lište priraďujeme triedu .navbar-light, respektíve .navbar-dark. Táto trieda nastyluje tlačidlo a farby textu. Samotnú farbu lišty potom nastavíme pridaním nejakej ďalšej triedy z background utilities, ktoré som si predstavili v lekcii Bootstrap - Tabuľky:

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

Pozíciovanie

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

• Fixná pozícia, kedy navigačná lišta neroluje so stránkou, ale zostáva na pevnej pozícii. Toto správanie 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 použí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ímavé, 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í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 toto správanie navigačnej lište priradíme triedu .sticky-top.

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í.