Lekce 18 - Stylování navigačního menu pomocí flexboxu

V minulé lekci, Stylování hlavičky HTML stránky a flexbox , jsme ostylovali hlavičku a ukázali si flexbox.

Dnes se budeme v HTML/CSS tutoriálu věnovat stylování naše navigačního menu. Ukážeme si, jak mu změnit uspořádání položek tak, aby byly vedle sebe s mezerami a byly dobře čitelné. Přidáme i změnu vzhledu položek po najetí myší.

Navigační menu

Nejprve seznamu v navigaci změníme odrážky. Dělá se to CSS vlastností list-style-type, k výběru máme následující hodnoty:

• circle - kruhové,
• decimal - číslované,
• decimal-leading-zero - číslované na 2 místa (před čísla menší než 10 přidá nulu),
• disc (výchozí) - vyplněný kruh,
• lower-alpha - malá písmena latinské abecedy,
• lower-greek - malá písmena řecké abecedy,
• lower-latin - malá písmena latinské abecedy,
• lower-roman - římské číslice malými písmeny,
• none - bez odrážek,
• square - čtvercové,
• upper-alpha - velká písmena latinské abecedy,
• upper-greek - velká písmena řecké abecedy,
• upper-latin - velká písmena latinské abecedy,
• upper-roman - římské číslice velkými písmeny,
• inherit - zdědí typ odrážek od rodičovského elementu.

Jak různé typy vypadají máme ukázáno v CSS3 kurzu, v lekci Seznamy v CSS3. Nás bude nyní zajímat hodnota none, která odrážky vypne.

Nastavíme tedy tento styl danému seznamu a zároveň mu vypneme vnější okraje (tím zmizí volné místo nahoře). Dále si ze seznamu uděláme flexbox, aby se nám prvky menu zobrazovaly vedle sebe, což již dobře známe:

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

Výsledek pak vypadá takto:

Vycentrování pomocí flexboxu

Položky seznamu budeme chtít mít vertikálně vycentrované. Ukážeme si nový způsob, jak toho dosáhnout pomocí flexboxu. Již víme, že pomocí vlastnosti justify-content definujeme, jak velký je prostor mezi a kolem položek obsahu podél směru flexboxu. Řešíme pomocí ní tedy umístění položek ve směru flexboxu (pro nás nyní v řádku). Existuje však i vlastnost pro definici umístění ve druhém směru, a to vlastnost align-items. Této vlastnosti můžeme opět nastavit mnoho hodnot, my použijeme hodnotu center pro vycentrování položek:

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

Zároveň jsme ještě seznam roztáhli přes celou výšku navigačního menu (height: 100%), aby jeho položky byly opravdu ve středu menu:

Úprava položek menu

Zbývá nějak domluvit položkám seznamu, aby vedle sebe vypadaly lépe. Přidáme jim proto nějaké odsazení pomocí padding a margin, změníme velikost fontu a výšku řádku:

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

Odkazy nebudeme chtít modré, ale bílé. Obarvit je není nic těžkého. Jak vypnout podtržení a vypsat je velkými písmeny již také víme:

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

Akce položky po najetí myší - hover

Zbývá jen nastavit podtržení aktivní položce (položce stránky, na které se aktuálně vyskytujeme) a položce, na kterou najedeme myší. Styl budou mít stejný, proto si pro ně napíšeme jen jeden styl. Stačí, když u něj uvedeme oba selektory oddělené čárkou. Využijeme zde parametru (pseudoselektoru) :hover, který spouští akci po najetí myší na prvek na stránce. Aktivní položku vybereme pomocí třídy aktivni:

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

Výsledek vypadá takto:

Projekt pro kontrolu naleznete jako vždy ke stažení v příloze.

V následujícím cvičení, Řešené úlohy k 16.-18. lekci HTML a CSS, si procvičíme nabyté zkušenosti z předchozích lekcí.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.