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 při tvorbě navigační lišty znalosti z minulé lekce.
Navigační lišta v Bootstrapu
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ří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 po popořadě. Navigační lištu vytvoříme elementem
<nav>
se 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 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 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-bs-toggle="collapse"
. Do
data-bs-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 .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ář
Ani poslední inline formulář z lekce Bootstrap - Formuláře by pro
nás již neměl být neznámý. Pro ně platí vše, co jsme si již v této
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í, 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 z lekce Bootstrap - Dropdowns.
Text
Libovolný text do navbaru vkládáme jako element <span>
se 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 i navigační lišta součástí
tisku, 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 utilities, které jsem si představili v lekci Bootstrap - Tabulky:
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 použijeme 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í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ím co 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í.