Na svých webových stránkách chceme čím dál častěji používat aktivní prvky menu. V současné době se například pro reload obrázku stále často používá javascript a pro zobrazení menu tabulkový layout. V tomto článku si ukážeme, jak takové menu vytvořit elegantně pouze pomocí kaskádových stylů. Jak měnit obrázky použité pro tvorbu jednotlivých položek menu, jak jednoduše vytvořit aktivní prvky menu, zkrátit dobu načítání, odstranit blikání mezi reloadem jednotlivých položek.

Použití seznamu pro vytvoření jednotlivých položek.

Moderní metodou pro vytvoření jednotlivých položek menu je použití tagů, které mají původní účel vytvoření seznamu. Na následujícím příkladě si ukážeme, jak dosáhnout takového efektu.

<ul>
<li>Položka 1</li>
<li>Položka 2</li>
<li>Položka 3</li>
</ul>

Takto bude zápis kódu menu vypadat. Další část tvoří kód CSS.

UL {
LIST-STYLE-TYPE: none;
PADDING: 0px; MARGIN: 0px;
}

Tento kód odstraní v menu odrážky. Stále však ještě musíme odstranit odsazení jednotlivých položek od krajů. Toho docílíme aplikací další vlastnosti:

LI {
PADDING: 0px; MARGIN: 0px;
}

Nyní již je seznam jednotlivých položek seřazen v námi chtěném pořadí bez odrážek a odsazení. Samozřejmě chceme, aby plochu odkazu tvořilo celá plocha odkazu jednotlivé položky. Nejprve v menu vytvoříme jednotlivé odkazy:

<ul>
<li><a href="#" class="item">Položka 1</a></li>
<li><a href="#" class="item">Položka 2</a></li>
<li><a href="#" class="item">Položka 3</a></li>
</ul>

Jednotlivým odkazům jsme přiřadili vlastnosti v CSS definovaného prvku item. Pro něj použijeme následující vlastnosti:

LI A {
WIDTH: 100px;
HEIGHT: 40px;
COLOR: #000000;
BACKGROUND-COLOR: #CCCCCC;
DISPLAY: block;
}

LI A:hover {
COLOR: #FFFFFF;
BACKGROUND-COLOR: #000000;
}

Nastavíme jak široké a jak vysoké použijeme tlačítko, barvu (pozadí a textu) jakou bude mít neaktivní prvek a stejné barvy nastavíme pro prvek aktivní (hover) - kurzor myši najel na prvek. Nyní nyní již máme vytvořenou základní konstrukci menu v css. Jedná se o takzvané sloupcové menu.

Pokud bychom chtěli vytvořené položky zobrazit v jednom řádku a nikoliv ve sloupci, v parametrech použijeme následující změnu:

LI {
PADDING: 0px; MARGIN: 0px;
DISPLAY: inline;
}

LI A {
WIDTH: 100px;
HEIGHT: 40px;
COLOR: #000000;
BACKGROUND-COLOR: #CCCCCC;
DISPLAY: inline;
}

V tuto chvíli již máme dokončené základní postupy tvorby menu v CSS

Reload obrázků jako položek v menu.

Pokud chceme použít jako položku menu obrázek, který se po najetí změní na jiný obrázek, můžeme použít další cestu v CSS.

Oba obrázky, které by bylo nutné reloadovat pomocí javascriptu, sloučíme do jednoho. Uložíme je vedle sebe asi jako na následujícím obrázku:

Poté upravíme vlastnosti jednotlivých položek v menu:

LI A {
WIDTH: 100px;
HEIGHT: 40px;
DISPLAY: block;
BACKGROUND-POSITION: 0px 0px;
BACKGROUND-REPEAT: no-repeat;
}
LI A:hover {
BACKGROUND-POSITION: -199px 0px;
DISPLAY: block;
} LI A.item1 {
BACKGROUND-IMAGE: url("images/button1.gif");
}
LI A.item2 {
BACKGROUND-IMAGE: url("images/button2.gif");
}
LI A.item3 {
BACKGROUND-IMAGE: url("images/button3.gif");
}

Na tomto případě vidíme, že se obrázek po najetí posune o daný úsek doleva. Tato operace je okem nepostřehnutelná a vyhneme se tedy zdlouhavému a náročnému javascriptu i jím způsobenému problikávání způsobené načítáním nového obrázku. Hodnoty pro pozici upravte podle vašich rozměrů. Tato metoda je tedy pro reload daleko vhodnější a rychlejší. Jako položku v menu použijeme následující syntaxi:

<ul>
<li><a href="#" class="item1">&nbsp;</a></li>
<li><a href="#" class="item2">&nbsp;</a></li>
<li><a href="#" class="item3">&nbsp;</a></li>
</ul>

Pevná mezera nahradí text, který je nahrazen obrázkem jako položkou.

Dnes jsme se tedy seznámili s metodou velice rychlého a účinného formátování menu pomocí CSS. Doufám, že bude platnou náhradou nebo alespoň alternativou zdlouhavého scriptování.
Funkční příklad s použitím výše uvedených postupů