Sexy obrázkové menu pomocí CSS!
Na webu se dost často setkávám s hlavní navigací, která je řešena obrázky. Ty ale většinou nemají textovou alternativu, maximálně ALT (alternativní popisek obrázku), při vypnutých obrázcích pak nastává situace, že jdou vidět „jakési“ alternativní popisky bez jakékoli formy. Při vypnutých stylech, se pravděpodobně zobrazí opět ono obrázkové menu, mnoho kodérů totiž jednotlivé odkazy na sekce umísťuje do HTML do tagu <img>, což ale není nejlepší řešení, obrázkově ztvárněná navigace totiž patří celá do kaskádových stylů, v kódu má být pouze obsahová část… tedy nečíslovaný seznam. Vychází to z oné základní koderské filozofie.
Připravil jsem si pro vás obrázkovou navigaci, která splňuje tyto
požadavky, v HTML dokumentu je pouze obsah, vizuální podoba menu je
v kaskádových stylech. K tomu všemu si pohrajeme s posouváním
pozadí u prvků, ušetříme tím práci s dalšími soubory
(obrázky) a zmenšíme tak i datový objem celé navigace. Pokud tedy máte
čas, pohodlně se usaďte a pustíme se do toho. 