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

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

V dnešním tutoriálu CSS frameworku Bootstrap využijeme znalosti z minulé lekce při tvorbě navigační lišty.

Navigační lišta v Bootstrapu

Navigační lišta (navbar) je jednou 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 která se na mobilních zařízeních smrskne do podoby tlačítka, jež otevírá svislé menu. Lišty kromě navigace často obsahují také logo, formuláře (například pro vyhledávání na stránce), texty a tlačítka zobrazující další obsah.

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-bs-toggle="collapse" data-bs-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 me-auto">
            <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">O firmě <span class="visually-hidden">(aktuální)</span></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="produkty-dropdown" role="button" data-bs-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="#">Kuchyně</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="#" tabindex="-1" aria-disabled="true">Ceník</a>
            </li>
        </ul>
        <form class="d-flex my-2 my-lg-0">
            <input class="form-control me-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 popořadě. Navigační lištu vytvoříme elementem <nav> s třídou .navbar. Pro dosažení responzivity dodáme například 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 to, jak přesně velké je které zařízení, jsme si zmínili v lekci Bootstrap - Typografie. Všimněme si, že responzivní menu je vytvořené pomocí Collapse z lekce Bootstrap Collapse a Accordion.

Logo

Logo vkládáme do odkazu s třídou .navbar-brand. Pokud do odkazu vkládáme také obrázek, je třeba mu 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> s třídou .navbar-toggler a data atributem data-bs-toggle="collapse". Do atributu data-bs-target zadáváme selektor elementu, který obsahuje další položky navigace. Na mobilních zařízeních se tento obsah zobrazí ve výsuvném menu místo v navigační liště. Na větších zařízeních je obsah zobrazen přímo v navigační liště. Tento element následuje dále jakožto <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> s třídou .navbar-nav, který se roztahuje do šířky, jak jen je to možné. Třída .me-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ář

Také poslední inline formulář již známe z lekce Bootstrap - Formuláře. Pro ně platí vše, co jsme si již ve zmíněné lekci ukázali. 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í, také 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 z lekce Bootstrap - Dropdowns.

Text

Libovolný text do navigační lišty vkládáme jako element <span> s třídou .navbar-text. Pomocí ní se text svisle vycentruje.

Navigační lišty se skryjí v případě, že se stránku rozhodneme vytisknout. Pokud bychom chtěli, aby byla součástí tisku i navigační lišta, přiřadíme jí 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, respektive .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 utilit, které jsem si představili v lekci Bootstrap - Tabulky:

<body>
   <nav class="navbar navbar-expand-md navbar-dark bg-success">
      <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" />
      Květinářství
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto">
            <li class="nav-item">
               <a class="nav-link active" aria-current="page" href="#">O firmě <span class="visually-hidden">(aktuální)</span></a>
            </li>
         </ul>
      </div>
   </nav>
   <br />
   <nav class="navbar navbar-expand-md navbar-dark bg-primary">
      <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" />
      Bazény
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto">
            <li class="nav-item">
               <a class="nav-link active" aria-current="page" href="#">O firmě <span class="visually-hidden">(aktuální)</span></a>
            </li>
         </ul>
      </div>
   </nav>
   <br />
   <nav class="navbar navbar-expand-md navbar-light bg-warning">
      <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" />
      Slunečnice
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto">
            <li class="nav-item">
               <a class="nav-link active" aria-current="page" href="#">O firmě <span class="visually-hidden">(aktuální)</span></a>
            </li>
         </ul>
      </div>
   </nav>
</body>

Navigační liště samozřejmě můžeme stejně tak nastavit úplně jakoukoli barvu pozadí pomocí vlastní třídy nebo inline stylu.

Pozicování

K pozicování navigační lišty použijeme position utility. 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ží na tom, zda chceme mít lištu 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ímavé, 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říklad velké logo, které se stránkou poté odscrolluje, zatímco navigace se k horní části obrazovky přilepí. Logo tedy na stránce nezabírá místo a navigace je stále po 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í.