Snadné vytváření menu v JavaScriptu

Menu na webových stránkách Každý webdesignér řeší při své práci jeden zásadní problém jak přehledně uspořá...


Menu na webových stránkách
Každý webdesignér řeší při své práci jeden zásadní problém jak přehledně
uspořádat na malou plochu internetového prohlížeče maximum informací. Úvodní
část stránek má největší cenu, protože ji uvidí každý návštěvník. Proto se do
ní umisťují nejdůležitější informace a také reklamy. Těch několik desítek řádků
musí přesvědčit uživatele, aby zůstal a neodešel jinam. Jenže jak dostat do
tohoto prostoru tolik informací? Řešením jsou menu.
Menu vytvářená v JavaScriptu vypadají a chovají se úplně stejně jako
"opravdová" menu aplikací ve Windows, X Window, Mac OS a jiných okenních
systémech. Po svém zvolení se vyrolují, při přejetí myší jednotlivé položky
mění barvu ("vysvicují se") a hlavně vybráním položky menu se provede nějaká
akce typicky se nahraje jiná stránka. Protože se menu objevují až po akci
uživatele a překrývají ostatní obsah stránky, jejich hlavní použití spočívá při
vytváření velice efektní navigace po obsahu serveru.
Vytvoření menu však není hračkou, zvláště pro neprogramátora to může být
nepřekonatelný oříšek. Dalším problémem je rozdílná kvalita implementace
JavaScriptu mezi hlavními prohlížeči. Mnozí proto volí jediný prohlížeč
Internet Explorer. Asi nikoho nepřekvapí, že stránky Microsoftu jsou
optimalizovány tak, aby se co nejhůře prohlížely pod konkurenčním Netscapem. My
ostatní však chceme, aby naše stránky fungovaly všem. A firma DTHL Lab nám
připravila milý dárek skript HierMenus.
Správné menu právě tady
Vše potřebné najdete na adrese http://www.webreference.com/dhtml /hiermenus/.
Tedy návod, příklad i zdrojový kód. Použití je velice snadné a zvládne jej i
laik. A hlavně skript je zdarma. Pouze musíte na svých stránkach umístit odkaz
na stránky firmy DHTML Lab. Skript bezproblémově funguje pod Internet
Explorerem verze 4 i 5, stejně jako pod Netscapem řady 4, nikoliv však pod
Mozillou.
Začlenění Hiermenu do vašich stránek je snadné. Nejdříve musíte přidat malý
kousek JavaScriptu, který otestuje, zda je návštěvníkův prohlížeč podporován. V
dalším kroku vložíte parametry, které ovlivňují vzhled a chování menu.
Například předvolenou barvu pozadí, barvu textu, použitý font, okraje či šířku
menu. Tyto údaje můžete později předefinovat u jednotlivých menu zvlášť.
Poslední modifikací vašich stránek je vložení kódu, který nahraje dva externí
soubory hierMenus.js, což je vlastní skript a hierArrays.js, který obsahuje
vaši definici menu. Předešlé kroky se dají provést
několikerým kopírováním přes schránku a případnou úpravou parametrů.
Vlastní práce
Nyní přichází na řadu ta zábavnější část vaší práce vytvoření souboru
hierArrays.js. Syntaxe je možná trochu otravná, ale není složitá. Vysvětleme si
vše na praktickém případě:
arMenu1 = new Array(
120,
"","",
"black","black",
"white","gray",
"black","black",
"O firmě","http://firma/about.html",0,
"Služby","http://firma/sluzby.html",1,
"Ceník","http://firma/cenik.html",0,
"Podmínky","http://firma/podminky.html",0
)
arMenu1_2 = new Array(
"Tvorba bannerů","http://firma /banner.html",0,
"WebDesign","http://firma/design.html",0,
"DHTML","http://firma/dhtml.shtml",0,
"PHP","http://firma/php.html",0,
"JavaScript","http://firma/js.html",0
)
Každé menu je tvořeno jedním polem. Pokud je menu hlavní (top-level), obsahuje
devět parametrů. Pokud chceme použít předvolené hodnoty, pak místo parametru
napíšeme dvě uvozovky. První parametr určuje šířku menu, druhé dva pozici
horního rohu menu. Prázdná hodnota se interpretuje jako pozice myši. Na čtvrtém
místě je barva fontu, na pátém pak barva fontu položky, na které je zrovna
kurzor. Podobně šestý parametr určuje barvu pozadí, sedmý pak pozadí pod myší.
Osmý parametr definuje barvu okraje a devátý zase barvu oddělovače (pouze v IE).
Pak už určujeme jednotlivé řádky menu. Každý řádek je definován třemi
hodnotami: textem, URL a číslem. Pokud je číslo nenulové, pak daný řádek
obsahuje podmenu. Místo čísla můžete použít logické hodnoty true a false.
Podmenu musí mít stejný název jako rodič, pouze se na konec názvu připíše
podtržítko a pořadí v menu. V našem případě je rodič arMenu1, podmenu Služby je
na druhé pozici, proto se bude jmenovat arMenu1_2. Jednoduché, že? Podmenu má
podobný tvar jako hlavní menu, dědí vzhled svého rodiče, a proto neobsahuje
prvních devět parametrů. Je tvořeno pouze trojicemi s definicí řádků.
Vložení do stránky
Po vytvoření souboru hierArrays.js je větší část práce hotova. Nyní už nám
pouze zbývá navázat zobrazení menu na některou událost, přesněji na pohyb myši.
V původním HTML kódu si vybereme některý odkaz a rozšíříme značku o další
dva parametry takto:
onMouseOut="popDown(elMenu1)">
Mapa stránek
.
Teď nahrajte stránku znovu a pokochejte se výsledkem. Najeďte myší nad zvolený
odkaz, a pokud se vám ihned neobjeví menu (závisí na hodnotě parametru
clickStart), klikněte na něj. Jak již bylo zmíněno výše, skript funguje pod NN
4 a IE verze aspoň 4.
Tipy ne úplně na závěr
Na závěr této části několik tipů. Název položky může obsahovat HTML kód, takže
není problém přidat do menu obrázky. Pokud vás obtěžují zprávy o vytváření menu
při nahrávání stránky, smažte řádky začínající slovem status ve funkcích
makeMenuNS, makeMenuIE a makeTop. Velice zajímavých efektů můžete dosáhnout
pomocí řízení pozice kaskádovitými styly. Bohužel ani IE 5 nedokáže správně
zobrazit mnohá kouzla, která se takto dají vytvořit. A hlavně, pamatujte na
uživatele, kteří používají alternativní prohlížeče bez podpory JavaScriptu. Pro
ně připravte stránku, kde nahradíte menu například tabulkami a seznamy. Takže
ani uživatelé Lynxu (jednoho z nejrychlejších prohlížečů vůbec) nebudou
ochuzeni o vaše stránky.
Konkurence i v menu
Samozřejmě jako ve všem, i v menu pro webové prohlížeče existuje konkurence.
Jednou z alternativ je např. dynamické menu, které najdete na stránkách firmy
Netscape na adrese
http://devedge.netscape.com/viewsource/smith_menu/smith_menu.html. Zde je pro
zájemce připraven popis tvorby menu, které funguje jak pod Internet Explorerem,
tak pod Netscapem.
Tři kroky na spuštění
Abyste si mohli udělat opravdu přesný obrázek, bude nejlepší nahlédnout i
trochu pod pokličku stejné menu, jaké vidíte na obrázku, společně vytvoříme.
Krok 1 zdrojová třída
Prvním nutným krokem je nahrát klíčovou třídu, která má na starost vlastní
tvorbu menu. Toho docílíme následujícím řádkem:

Krok 2 vlastní menu
Poté již můžeme rovnou přistoupit ke tvorbě menu, která je velice jednoduchá a
vychází z principů objektově orientovaného programování:

V tomto případě jsme vytvořili vlastně menu dvě, kde první z nich (mySubMenu)
slouží jako podmenu pro myMenu1. Na příkladu je jasně vidět, jak se takové menu
tvoří i jak se nastavují různé parametry. Zde je důležité podotknout, že jako
druhý parametr funkce addMenuItem lze samozřejmě použít i další možnosti, např.
parametr "document.bgColor=red" nastaví barvu pozadí na červenou.
Krok 3 přidání na stránku
Nakonec již jen stačí přidat vyvolání takto vytvořeného menu na vaše stránky.
Asi nejčastěji tak učiníte pomocí jednoho z následujících kódů v prvním případě
je menu navázáno na kliknutí myši, ve druhém již jen stačí přejet kurzorem nad
odkazem.
zobraz menu
zobraz menu
0 2036 / alsn









Komentáře
K tomuto článku není připojena žádná diskuze, nebo byla zakázána.