Vysouvací menu pomocí JavaScriptu II. - Builder.cz - Informacni server o programovani

Navigace:  » Úvodní stránka  » Rubriky  » JavaScript  

2. března 2001, 00.00 | V minulém článku jsme si ukázali, jak se tvoří vysouvací menu v JavaScriptu. Dnes se podíváme na to, jak lze takové menu rozhýbat.

ASP C/C++ Delphi HTML Java JavaScript Komponenty PHP Software Tiskové zprávy Visual Basic Web Windows Zprávy

Builder

V minulém článku jsme si ukázali, jak se tvoří vysouvací menu v JavaScriptu. Dnes se podíváme na to, jak lze takové menu rozhýbat. Jako minule i dnes si nejdříve ukážeme jak to bude ve finále vypadat:






















Jednotlivé součásti menu
Při nahrání stránky je celé menu skryto pod bílou tabulkou, která je nad hlavičkou menu (z toho důvodu musíme nad menu vynechávat větší místo). Zdrojový kód této tabulky je následující:

<span onmouseover="posun3();" style="position:absolute;left:510px;top:365px;visibility:visible;"><layer onmouseover="posun3();"><table width="100%" bgcolor="#ffffff" border=0 cellpadding=0 cellspacing=0><tr><td><img src="https://www.builder.cz/dimg/null.gif" width=100 height=285 border=0></td></tr></table></layer></span>

Menu se začne vysouvat po najetí myší nad hlavičkou menu (Builder). Její zdrojový kód jsme si ukázali již minule, dnes pouze zaměníme funkci show() za funkci posun1() u události onmouseover:

<span onmouseover="posun1();" style="position:absolute;left:510px;top:650px;"> <layer onmouseover="posun1();"> <table cellpadding=0 cellspacing=0 border=0 width=100 bgcolor="#000000"> <tr> <td> <table cellspacing=1 cellpadding=3 border=0 width="100%"> <tr><td class="exp" bgcolor="#ffffe0">Builder</td> </tr> </table> </td> </tr> </table> </layer> </span>

Zdrojový kód samotného menu se od toho minulého téměř nezměnil, jen je celé menu, jak již bylo řečeno, při načtení stránky posunuto o pár pixelů výše a také není skryto zápisem visibility:hidden (z toho důvodu, že je skryto pod bílou tabulkou). Stejně tak se nezměnil ani podklad menu, který pouze při události onmouseover volá funkci posun3() místo funkce unshow().

Ještě poznámka k překrývání jednotlivých součástí menu: Platí, že ve stránce později definovaný element překrývá dříve definovaný element. Z tohoto důvodu musíme ve zdrojovém kódu definovat jednotlivé vrstvy v tomto pořadí: podklad menu, menu, bílá tabulka překrývající menu při nahrání stránky a hlavička menu.

Funkce pro posun menu
Pokud najedeme myší nad menu, spustí se funkce posun1(). Zdrojový kód této funkce vypadá následovně:

function posun1() { nahoru = "false"; posun2(); }

Vidíme, že tato funkce nastavuje hodnotu proměnné nahoru na false - význam této proměnné si vysvětlíme později. V druhé řadě potom tato funkce spouští funkci posun2():

pos = 390; function posun2() { if ((pos != 671) && (nahoru == "false")) { pos++; if (document.all) document.all.menu.style.top = pos; if (document.layers) document.menu.top = pos; setTimeout("posun2()",3); } }

Ještě před začátkem funkce posun2() musíme do proměnné pos uložit hodnotu 390, protože pozice menu při nahrání stránky je právě 390 pixelů.

A nyní již k samotné funkci posun2(): Ta nejdříve zjistí, jestli pozice menu není 671 pixelů (to je cílová pozice menu) a proměnná nahoru je nastavena na hodnotu false. Pokud jsou obě podmínky splněny, přičte se k hodnotě proměnné pos jednička a pozice menu se nastaví na tuto hodnotu. Poté se opět spustí funkce posun2(). Takto se menu posunuje dokud nedosáhne pozice 671 pixelů nebo se nezmění hodnota proměnné nahoru.

Pohyb menu nahoru zajišťují funkce posun3() a posun4(), které pracují na stejném principu:

function posun3() { nahoru = "true"; posun4(); } function posun4() { if ((pos != 390) && (nahoru == "true")) { pos--; if (document.all) document.all.menu.style.top = pos; if (document.layers) document.menu.top = pos; setTimeout("posun3()",3); } }

Vidíme, že se nám pouze změnila cílová pozice menu (na 390 pixelů) a potřebná hodnota proměnné nahoru. Její význam si nyní vysvětlíme: Pokud najedeme myší nad hlavičku menu, spustí se funkce posun1(), která nastaví hodnotu proměnné nahoru na false, takže funkce posun2() může bez problému probíhat. Pokud ale najedeme myší mimo menu, spustí se funkce posun3(), která nastaví hodnotu této proměnné na true, takže funkce posun2() nemůže dále probíhat. Naopak je splněna podmínka pro běh funkce posun4().

Závěrem
Závěrem jen dodávám, že menu v této podobě bylo úspěšně testováno na Internet Exploreru 4 a Netscape Navigatoru téže verze. Budu rád, pokud necháte v diskusi pod článkem vaše zkušenosti s funkčností menu v dalších prohlížečích. A to je pro dnešek všechno.