Články
Vysouvací a rozbalovací menu v CSS (1)
Zajímavá alternativa k běžným JavaScriptovým navigacím.
Rozhodl jsem se popsat přepracování rozbalovacího menu, které ovládalo navigaci celého webu. Původní řešení bylo zcela závislé na JavaScriptech, které bohužel vyžadovaly doplnění prohlížečů o Java moduly. Celý problém byl navíc oblečen do rámců, které se nedaly odstranit kvůli propojení grafiky záhlaví a levého sloupce.
Stáhnul jsem si z Knihovny CSS na stránkách Interval.cz postup, který funguje jako rozbalovací vertikální menu, kdy podnabídka vybíhá doprava. Všechno fungovalo výborně, přestože prohlížeč Internet Explorer vyžaduje doplnění kořenového adresáře o speciální script hover.htc.
Pokud nevíte, o co jde, doporučuji publikaci Eric Meyer o CSS – pokračujeme s kaskádovými styly Profesionálně!, kde autor důvody i použití scriptu popisuje velmi detailně (pro mne stále nepřekonaná kniha o CSS v češtině). Jak jsem ale zjistil, toto řešení je použitelné pouze v layoutu stránky bez použití frame.
Poté, kdy příslušný rámec pracoval, jak měl, se totiž objevil neřešitelný problém. Po spuštění stránky s rámci se rozbalovaná podnabídka ukryla pod hlavní rámec. Důvod byl zřejmý – tento frame byl nadřazen levému. Nepříjemná situace, neboť pořadí umístění rámců na stránce index.htm souvisí s návazností grafiky a umístěním sloupců a řádků (cols, rows), které určují velikost rámců. Vhodným řešením by bylo vytvoření bezrámového layoutu, které by zde ale bylo velmi pracné, a navíc nepropojovalo hodně propracovanou grafiku záhlaví a levého sloupce, kterou jsem musel zachovat.
Nakonec jsem zvolil řešení, kdy se podnabídka v menu vysouvala pod hlavní navigaci. Cílem bylo mít textové odkazy, závislé na CSS, které budou fungovat ve třech nejpoužívanějších prohlížečích (Internet Explorer, Firefox a Opera). Řešení, které jsem použil, je ze stránky Alsacréations (francouzský web v anglickém překladu, který řeší poměrně jednoduše kvalitní a čistý webdesign).
Ve zdrojovém kódu je použitý krátký JavaScript (bohužel, je nutný i zde) a styl CSS, který ovlivňuje vzhled navigace. Menu je kompletně textové, s několika doplňujícími prvky typu "seznamy" funguje spolehlivě. V případě použití budu rád za vaše reakce, dost by mne zajímala jeho další budoucnost.
>>>>>
28-05-2006