18. diel - Štylovanie navigačného menu pomocou flexboxu
Dnes sa budeme v HTML/CSS tutoriáli venovať štylovaniu nášho navigačného menu. Ukážeme si, ako mu zmeniť usporiadanie položiek tak, aby boli vedľa seba s medzerami a boli dobre čitateľné. Pridáme aj zmenu vzhľadu položiek po nabehnutí myšou.
Navigačné menu
Najprv zoznamu v navigácii zmeníme odrážky. Robí sa to
CSS vlastností list-style-type
, na výber máme nasledujúce
hodnoty:
circle
- kruhové,decimal
- číslované,decimal-leading-zero
- číslované na 2 miesta (pred čísla menšie ako 10 pridá nulu),disc
(východiskový) - vyplnený kruh,lower-alpha
- malé písmená latinskej abecedy,Greek
- malé písmená gréckej abecedy,lower-latin
- malé písmená latinskej abecedy,lower-roman
- rímske číslice malými písmenami,none
- bez odrážok,square
- štvorcové,upper-alpha
- veľké písmená latinskej abecedy,Greek
- veľké písmená gréckej abecedy,upper-latin
- veľké písmená latinskej abecedy,upper-roman
- grécke číslice veľkými písmenami,inherit
- zdedí typ odrážok od rodičovského elementu.
none
, ktorá zarážky vypne.
Nastavíme teda tento štýl danému zoznamu a zároveň mu vypneme vonkajšie okraje (tým zmizne voľné miesto hore). Ďalej si zo zoznamu urobíme flexbox, aby sa nám prvky menu zobrazovali vedľa seba, čo už dobre poznáme:
Výsledok potom vyzerá takto:
Vycentrovanie pomocou flexboxu
Položky zoznamu budeme chcieť mať vertikálne
vycentrované. Ukážeme si nový spôsob, ako to dosiahnuť pomocou
flexboxu. Už vieme, že pomocou vlastnosti
justify-content
definujeme, aký veľký je priestor medzi a okolo
položiek obsahu pozdĺž smeru flexboxu. Riešime pomocou nej teda
umiestnenie položiek v smere flexboxu (pre nás teraz v riadku).
Existuje však aj vlastnosť pre definíciu umiestnenia v druhom smere, a to
vlastnosť align-items
. Tejto vlastnosti môžeme opäť nastaviť
mnoho hodnôt, my použijeme hodnotu center
pre vycentrovanie
položiek:
Zároveň sme ešte zoznam
roztiahli cez celú výšku navigačného menu (height: 100%
), aby
jeho položky boli naozaj v strede menu:
Úprava položiek menu
Zostáva nejako dohodnúť položkám zoznamu, aby vedľa seba
vyzerali lepšie. Pridáme im preto nejaké odsadenie
pomocou padding
a margin
, zmeníme veľkosť
fontu a výšku riadku:
Odkazy nebudeme chcieť modré, ale biele. Zafarbiť ich nie je nič ťažké. Ako vypnúť podčiarknutie a vypísať ich veľkými písmenami už tiež vieme:
Akcia položky po nabehnutí myšou -
hover
Zostáva len nastaviť podčiarknutie aktívnej položke
(položke stránky, na ktorej sa aktuálne vyskytujeme) a položke, na ktorú
prejdeme myšou. Štýl budú mať rovnaký, preto si pre nich napíšeme iba
jeden selektor. Využijeme tu parametra (pseudoselektora) :hover
,
ktorý spúšťa akciu po nabehnutí myšou na prvok na
stránke. Aktívnu položku vyberieme pomocou triedy aktivni
:
Výsledok vyzerá takto:
Projekt na kontrolu nájdete ako vždy na stiahnutie v prílohe.
Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 378x (2.28 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS