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