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ý HTML kód pro menu:

• Celé menu je seznam (zpravidla <ul>).
• Menu je <nav> 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 tomto příkladu; je zaměřen na jinou vlastnost, nicméně na řešení menu pomocí seznamu se podívejte do jeho zdrojového kódu).

Menu svým charakterem je seznamem položek, takže první varianta je výrazně častější a je doporučována. Nicméně podívejme se teď podrobněji na tu druhou, spíše pro ilustraci využití vlastnosti display.

Zdrojový kód

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

<nav class="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>
</nav>

Celé menu je zabaleno do <nav>. 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ě:

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 <nav> 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ými 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: 10em; }
.menu span { display: none; }
.menu a {
    display: block;
    color: #fff2bf;
    background-color: #730000;
    text-decoration: none;
    padding: 3px 5px;
    border-bottom: solid 1px #8f4949;
}
.menu a:hover { background-color: #990000; }

A zde je výsledek:

zpět: CSS – vlastnost display