Menu. Vzhledem k tomu, že chci mít v menu nějaký hezký :hover efekt, a taky chci zvýraznit, kde se uživatel právě nachází, tak se nám práce lehce komplikuje. Nejdříve se podívejte, jak vypadá základní obrázek našeho meníčka. Jsou to v podstatě dvě menu pod sebou, při čemž každé má jinou barvu písma – proč? Při tvobě menu využijeme techniku CSS Sprites, která byla popsána před dávnými a dávnými časy samotným Davem S. na A List Apart.

V čem spočívá technika CSS Sprites?

V podstatě se jedná o to, že seznamu prvků, který uzavřeme do divu, nastavíme obrázek do pozadí, zakryjeme text a nad pozadím absolutně napozicujeme blokové odkazy tak, aby příslušný odkaz pokrýval příslušnou část obrázku. Výhodou této techniky je, že máme pouze jeden obrázek pro celé menu i doplňující efekty. div#menicko {width: 150px;margin: 0;padding: 0;height: 217px;position: relative;} #menu {width: 150px;height: 217px;background: url(images/menu.jpg) #FFF no-repeat;position:relative;left:0;top:0;} /*náš seznam s odkazy*/ #menu li {margin: 0;padding: 0;list-style: none;position: absolute;left: 0;height: 27px;width: 150px} #menu li, #menu a {height:27px;display:block;} #menu li a span {position:absolute;left:-9999px;} /*textové odkazy odsuneme*/ #home {top:0px} /*pozicování položek seznamu*/ #aktuality {top:27px} #informace {top:54px} #materialy {top:81px} #fotosoutez {top:108px} #archiv {top:135px} #kontakt {top:162px} #dotoho {top:189px} Tímto způsobem jsme vytvořili menu bez :hover efektu (a bez zvýraznění příslušné stránky). Efekty vytvoříme tak, že posuneme při najetí myší pozadí odkazu do oblasti, kterou uživatel nevidí a jsou v ní položky zdůrazněny (proto obrázek obsahuje 2 meníčka pod sebou). Pro aktivní odkaz si vytvoříme třídu active, kterou bude mít aktivní odkaz (v našem případě bude vypadat stejně jako po najetí myší – pokud bychom chtěli jinou barvu aktivního odkazu, tak bychom museli umístit do obrázku ještě jedno menu). #home a:hover, #home a.active {background: transparent url(images/menu.jpg) 0px –218px no-repeat} #aktuality a:hover, #aktuality a.active {background: transparent url(images/menu.jpg) 0px –245px no-repeat} #informace a:hover, #informace a.active {background: transparent url(images/menu.jpg) 0px –272px no-repeat} #materialy a:hover, #materialy a.active {background: transparent url(images/menu.jpg) 0px –299px no-repeat} #fotosoutez a:hover, #fotosoutez a.active {background: transparent url(images/menu.jpg) 0px –326px no-repeat} #archiv a:hover, #archiv a.active {background: transparent url(images/menu.jpg) 0px –353px no-repeat} #kontakt a:hover, #kontakt a.active {background: transparent url(images/menu.jpg) 0px –380px no-repeat} #dotoho a:hover, #dotoho a.active {background: transparent url(images/menu.jpg) 0px –407px no-repeat} Přesné rozměry a posunutí pozadí při :hover efektu jsou upravena přímo pro tento obrázek – pokud tuto techniku použijete jinde, tak je nutné rozměry upravit. Co nám vlastně vzniklo? – podívejme se na příklad 5. V dalším díle ještě lehounce upravíme menu a vrhneme se na layout webu.