18. diel - Štýlovanie navigačného menu pomocou flexboxu

V minulej lekcii, Štýlovanie hlavičky HTML stránky a flexbox , sme oštýlovali hlavičku a ukázali si flexbox.

Dnes sa budeme v HTML/CSS tutoriáli venovať štýlovaniu 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 pomocou CSS vlastnosti 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,
• lower-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,
• upper-greek - veľké písmená gréckej abecedy,
• upper-latin - veľké písmená latinskej abecedy,
• upper-roman - rímske čí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, konkrétne v lekcii Zoznamy v CSS3. Nás bude teraz zaujímať hodnota none, ktorá odráž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:

nav ul {
    margin: 0;
    list-style-type: none;
    display: flex;
}

Výsledok 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. Pomocou nej teda riešime 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:

nav ul {
    margin: 0;
    list-style-type: none;
    display: flex;
    align-items: center;
    height: 100%;
}

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 upraviť položky 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:

nav ul li {
    padding: 0 25px;
    margin: 0 5px;
    font-size: 1em;
    line-height: 4.3em;
}

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:

nav ul a {
    color: white;
    padding: 8px 0;
    text-decoration: none;
    text-transform: uppercase;
}

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 ne napíšeme iba jeden štýl. Stačí, keď u neho uvedieme oba selektory oddelené čiarkou. Využijeme tu parameter (pseudoselektor) :hover, ktorý spúšťa akciu po nabehnutí myšou na prvok na stránke. Aktívnu položku vyberieme pomocou triedy active:

nav ul a:hover, .active a {
    border-bottom: 2px solid #EF6534;
}

Výsledok vyzerá takto:

Projekt pre kontrolu nájdete ako vždy na stiahnutie v prílohe.

V nasledujúcom cvičení, Riešené úlohy k 16.-18. lekcii HTML a CSS, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.

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