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.

Ako rôzne typy vyzerajú máme ukázané v CSS3 kurze, v lekcii Zoznamy v CSS3. Nás bude teraz zaujímať hodnota 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š.