Články
Horizontální a rozbalovací menu s CSS (2)
Malá ukázka horizontálního a rozbalovacího menu s využitím kaskádových stylů a JavaScriptu.
Ačkoli se snažím JavaScripty na webech využívat minimálně, někdy jsem za ně rád. Nicméně, stále se snažím dodržet jejich účelnost. Základní vlastnost Javascriptů je dynamičnost, která je někdy v případě navigace nahraditelná kaskádovými styly ve spolupráci s pseudotřídou :hover. Občas také může být výsledný kód stránky s Javascriptovým ovládáním menší a pochopitelnější. To je důvod, proč jsem se rozhodl popsat jednu poměrně jednoduchou navigaci, která je snadno použitelná v jakékoli webové stránce.
Popisované navigační menu je horizontální a rozbalovací. Jeho využití je například u fotogalerií, kdy potřebujete na prezentaci co nejširší plochu. Levé nebo pravé menu by ji totiž zbytečně zmenšovalo. Navigace, která vlastně na stránce pod záhlavím "visí", působí nenápadně a nenarušuje celkový design webu.
Kód odkazů využívá méně známé tagy pro tvorbu seznamů, které jsou definovány pomocí kaskádových stylů. Prvek <dl> ovládá hlavní nabídku, <dt> se používá pro název odkazu a <dd> pro definovanou podnabídku. Každý odkaz v submenu je nutné uvést zvlášť, ale to není nic nového.
Ukázka jedné části navigace vypadá celkem jednoduše:
<dl>
<dt onmouseover="montre(´smenu´);" > <a href="#">Timova nabídka</a></dt>
<dd id="smenu">
<ul>
<li><a href="http://chytraktim.com/">Chytrák Tim</a></li>
<li><a href="http://www.chytraktim.com/uvod.php">Kurz o webdesignu</a></li>
</ul>
</dd>
</dl>
Tato část obsahuje Javascriptový prvek onmouseover, což je reakce na "přejetí" myší, která se projeví jako podnabídka (montre). Vzhled navigačního menu se již upravuje pomocí kaskádových stylů. Ty jsou v níže uvedeném odkazu umístěny do struktury stránky, aby byly viditelné ve zdrojovém kódu. Při popisu jsem vycházel z webu Alsacréations, kde je možné najít i další zajímavé návrhy.
>>>>>
08-09-2006