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

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

6. února 2001, 00.00 | Určitě jste se již mnohokrát na Internetu setkali s vysouvacím menu. V dnešním článku si ukážeme, jak takové menu vytvořit pomocí JavaScriptu.

Builder

Weby

Portály

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

Builder Grafika Galerie MujMac BonusWeb AudioNet

Seznam Atlas Centrum

Určitě jste se již mnohokrát na Internetu setkali s vysouvacím menu. V dnešním článku si ukážeme, jak takové menu vytvořit pomocí JavaScriptu.
Začněme ukázkou toho, jak to bude ve finále vypadat:





Poznámka redaktora: Pokud používáte rozlišení větší než 800x600, stránka se vám vycentruje a menu nikoliv. Autor na tomto problému pracuje (zrušení absolutní pozice menu) a řešení bude součástí některého z dalších článků)

Jak na to
Nejdříve si musíme vytvořit toto menu pomocí HTML tabulek - pro stručnost zde uvádím pouze zdrojový kód prvního ze tří sloupečků, ostatní jsou prakticky totožné:

<span onmouseover="show('1');" style="position:absolute;left:230px;top:380px;"> <layer onmouseover="show('1');" onmouseout="unshow('1');"> <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> <span id="menu1" style="position:absolute;left:230px;top:401px;visibility:hidden;"> <layer> <table cellpadding=0 cellspacing=0 border=0 bgcolor="#000000" width=100>  <tr>   <td align="center">   <table cellspacing=1 cellpadding=0 border=0 width="100%">    <tr>     <td>     <table cellspacing=0 cellpadding=3 border=0 width="100%">      <tr>       <td class="exp" bgcolor="#f3f4f4"><a href="https://www.builder.cz/asp/" class="exp">ASP</a></td>      </tr>      <tr>       <td class="exp" bgcolor="#f3f4f4"><a href="https://www.builder.cz/cpp/" class="exp">C/C++</a></td>      </tr>      <tr>       <td class="exp" bgcolor="#f3f4f4"><a href="https://www.builder.cz/delphi/" class="exp">Delphi</a></td>      </tr>      <tr>       <td class="exp" bgcolor="#f3f4f4"><a href="https://www.builder.cz/html/" class="exp">HTML</a></td>      </tr>      <tr>       <td class="exp" bgcolor="#f3f4f4"><a href="https://www.builder.cz/java/" class="exp">Java</a></td>      </tr>      <tr>       <td class="exp" bgcolor="#f3f4f4"><a href="https://www.builder.cz/javascript/" class="exp">JavaScript</a></td>      </tr>      <tr>       <td class="exp" bgcolor="#f3f4f4"><a href="https://www.builder.cz/komponenty/" class="exp">Komponenty</a></td>      </tr>      <tr>       <td class="exp" bgcolor="#f3f4f4"><a href="https://www.builder.cz/php/" class="exp">PHP</a></td>      </tr>      <tr>       <td class="exp" bgcolor="#f3f4f4"><a href="https://www.builder.cz/software/" class="exp">Software</a></td>      </tr>      <tr>       <td class="exp" bgcolor="#f3f4f4"><a href="https://www.builder.cz/tisk/" class="exp">Tiskové zprávy</a></td>      </tr>      <tr>       <td class="exp" bgcolor="#f3f4f4"><a href="https://www.builder.cz/vb/" class="exp">Visual Basic</a></td>      </tr>      <tr>       <td class="exp" bgcolor="#f3f4f4"><a href="https://www.builder.cz/web/" class="exp">Web</a></td>      </tr>      <tr>       <td class="exp" bgcolor="#f3f4f4"><a href="https://www.builder.cz/windows/" class="exp">Windows</a></td>      </tr>      <tr>       <td class="exp" bgcolor="#f3f4f4"><a href="https://www.builder.cz/zpravy/" class="exp">Zprávy</a></td>      </tr>     </table>     </td>    </tr>   </table>   </td>  </tr> </table> </layer> </span>

Hned na začátku používáme tag SPAN, pomocí něhož specifikujeme přesné umístění první viditelné buňky (je to ta s nápisem Builder) na stránce: style="position:absolute;left:230px;top:380px;" - ta se tedy bude nacházet 230 pixelů od levého okraje stránky a 370 pixelů od horního okraje stránky. Dále zde používáme událost onmouseover, která říká, že při najetí kurzorem myši nad plochu, kterou ohraničuje tag SPAN, se spustí javascriptová funkce show s parametrem 1. Tuto funkci si popíšeme níže.

Pod tagem SPAN se navíc nachází tag LAYER - ten je zde proto, že Netscape Navigator ve verzi 4 nepodporuje událost onmouseover u tagu SPAN. Protože ale zároveň Internet Explorer tag LAYER nezná, nedochází k žádné kolizi.

Samotné menu je opět uzavřeno mezi tagy SPAN a LAYER. U tagu SPAN nám přibyl parametr ID, který má v tomto případě hodnotu 1 a celé menu nám tak identifikuje. Navíc u definice stylu nám přibyl parametr visibility:hidden, který říká, že celé menu bude při nahrání stránky skryto.

Navíc si ještě musíme vytvořit jakýsi "podklad" celého menu, který bude mít význam při opětovném schovávání menu:

<span onmouseover="unshow();" style="position:absolute;left:180px;top:320px;visibility:visible;"> <layer onmouseover="unshow();"><img src="https://www.builder.cz/dimg/null.gif" width=400 height=410 border=0></layer> </span>

Tento podklad je tvořen průhledným obrázkem o velikosti 400 x 410 pixelů a ve zdrojovém kódu musí být definován ještě před samotným menu, jinak by menu bylo nefunkční! Při najetí myší nad podklad je volána funkce unshow, kterou si nyní popíšeme.

Funkce show a unshow

<script type="text/JavaScript"> function show(id) { if (document.all) { for(i=1;i<4;i++) { nv = eval("document.all.menu" + i); nv.style.visibility="hidden"; } emt = eval("document.all.menu" + id); emt.style.visibility="visible"; } if (document.layers) { for(i=1;i<4;i++) { nv = eval("document.menu" + i); nv.visibility="hidden"; } emt = eval("document.menu" + id); emt.visibility="visible"; } } function unshow() { for(i=1;i<4;i++) { if (document.all) { emt = eval("document.all.menu" + i); emt.style.visibility="hidden"; } if (document.layers) { emt = eval("document.menu" + i); emt.visibility="hidden"; } } } </script>

Funkce show má dvě větve: pro prohlížeče, které znají zápis document.all (IE) a pro ty, které znají zápis document.layers (NN). Nejprve "zhasne" všechny menu tím, že nastaví jejich vlastnost visibility na hodnotu hidden (pro kratší zápis zde využíváme cyklu for). Poté do proměnné emt uloží zápis i s identifikačním číslem menu (proměnná id, která je předávána funkci při jejím zavolání) a provede změnu jeho viditelnosti na visible, takže celé menu bude vidět.

Funkce unshow je volána, pokud dojde k události onmouseover u našeho podkladu a je identická se začátkem funkce show, takže se postará o zhasnutí všech menu.

Jak to celé funguje
Pokud najedeme myší nad buňku s nápisem Builder, spustí se funkce show a uvidíme menu. Poté může dojít ke třem možnostem:
1. Pokud myš umístíme na náš podklad, spustí se funkce unshow a menu se skryje.
2. Pokud myš umístíme na menu, nic se nestane (menu nemá definovanou žádnou událost onmouseover) a můžeme si vybrat jednu z položek. Pokud si nevybereme a umístíme myš mimo menu (tedy na náš podklad), opět se spustí funkce unshow a menu zmizí.
3. Pokud myš umístíme na další nadřazenou buňku menu (v našem případě s nápisem Weby), spustí se opět funkce show, která nejprve nechá zmizet předchozí menu (v našem případě to byly rubriky Builderu) a ukáže nám druhé menu (v našem případě nabídku webů).

Tímto způsobem vytvoříme i zbytek menu (samozřejmě musíme každé odpovídajícím způsobem posunout do prava), jen druhé pojmenujeme menu2 a voláme funkci show s parametrem '2'.

Kompatibilita v prohlížečích
Toto menu bylo úspěšně testováno na čtyřkových verzích Netscape Navigatoru a Internet Exploreru. Pokud někdo používáte Operu, případně jiné méně frekventované prohlížeče, můžete dát ostatním vědět v diskusi pod článkem.

Závěrem
Netvrdím, že by se toto menu nedalo vytvořit lépe - šlo by udělat vizuálně přitažlivější, šla by vytvořit funkce, která by jednotlivá menu generovala, aby byl celý kód kratší apod. - bohužel na to nemáme v článku dost prostoru. Proto berte tento článek spíše jako inspiraci popisující základní princip, který můžete použít při tvorbě Vašich vlastních menu.

Příště si ukážeme, jak se dá takové menu obohatit o různé efekty.