Příklad formátování menu

Jednou ze situací, kde se často laboruje s vlastností display, je formátování menu. Existují dva základní přístupy, jak pojmout zdrojový XHTML kód pro menu:

Celé menu je seznam (zpravidla <ul>).
Menu je <div> obsahující samotné odkazy a nějaké oddělovače mezi nimi.

V obou případech se vhodným nastavením vlastnosti display dosáhne požadovaného vzhledu. Při použití seznamu se v něm změní typ prvku <li> z list-item na block (jako třeba v tomo příkladu, příklad je zaměřen na jinou vlastnost, nicméně na řešení menu pomocí seznamu se podívejte do jeho zdrojového kódu). Na druhý případ se podívejme podrobněji.

Zdrojový kód

XHTML kód menu je velmi jednoduchý. Vypadá třeba takto:

<div id="menu">
<a href="p-display1.html">raz</a>
<span>|</span>
<a href="p-display1.html">dva</a>
<span>|</span>
<a href="p-display1.html">tři</a>
<span>|</span>
<a href="p-display1.html">čtyři</a>
</div>

Celé menu je zabaleno do <div>. Uvnitř najdete jednak prvky <a> obsahující položky menu, jednak jejich oddělovače. Ty jsou určeny pro klienty nepodporující CSS, aby jejich uživatelům usnadnily odlišení jednotlivých položek. Já jsem pro tento účel použil svislou čáru (|). Pokud klient bude podporovat CSS, čára zmizí. Proto je obalena prvkem <span>, jehož prostřednictvím takového efektu dosáhnu.

Pokud klient nepodporuje CSS, zobrazí menu následovně:

raz | dva | tři | čtyři

CSS

Základní trik spočívá v tom, že z prvků <a> udělám prvky blokové (pochopitelně jen uvnitř menu). To znamená, že v menu vytvoří obdélníkové bloky, jež budou uspořádány pod sebou. Odpovídající definice zní:

#menu a { display: block; }

Nyní by ovšem překážely oddělující svislé čáry, takže je z formátované verze vyřadíme:

#menu span { display: none; }

Posledním podstatným krokem je nastavit obalujícímu <div> vhodnou šířku, jež určí šířku celého menu. Aby výsledek vypadal k světu, je záhodno pohrát si ještě se vzhledovýni vlastnostmi – nastavit barvy, jednotlivé položky od sebe oddělit, případně pseudotřídou :hover zajistit, že menu bude reagovat změnou barvy na pozici myši. Celá definice by mohla vypadat třeba takto:

#menu { width: 150px; }
#menu span { display: none; }
#menu a {
    display: block;
    color: #fff2bf;
    background-color: #730000;
    text-decoration: none;
    padding: 3px 5px;
    border-bottom: solid 1px #8c1c1c;
}
#menu a:hover { background-color: #990000; }

A zde je výsledek:

zpět: CSS – vlastnost display