Hogyan írjunk Javascript menüt?

Gondolom, sokan láttak már szép menüket egyes weboldalakon, és gondolom, még többen kérdeztek rá, hogyan is készülnek ezek. Miután elolvassák ezt a cikket, rendelkezésükre áll majd egy módszer erre a feladatra. Nem állítom, hogy csak ez az egy létezik, de én ezt ismerem, úgyhogy ezt fogom megosztani az Olvasókkal. Ha ismernek más módszereket ennek a funkciónak az ellátására, kérjük, hogy küldjék el nekünk és mi közzé tesszük. Amire szükségünk lesz, az kevéske Javascript ismeretanyag, kevés HTML4.0-ás ismeretanyag, és egy számítógép.

Miki és a Layerek

A Layerek téglalap alakú objektumok egy HTML dokumentumban. Úgynevezett "container" szerepet látnak el, vagyis a layerekbe pakolhatunk mindenféle dolgokat, például szép képeket, vagy szövegeket, hogy ne is beszéljünk gombokról, vagy más haladó fogalmakról. Egy tapasztalt webdesigner kezében halálos fegyver egy jól elhelyezett réteg.

Layereket létrehozhatunk a következő módon:

<DIV ID = azonosito TITLE = cim EVENT = script >  Ez a layer tartalma  </DIV>

ahol, az ID egy SGML (Standard Generalized Markup Language) standard azonosító (nem kell megijedni, nagyon egyszerű, csak a neve csúnya), a TITLE az a ToolTip formájában megjelenő szöveg, amely akkor tűnik elő, amikor az egérrel sétálunk a layer fölött, az EVENT pedig az események sora, melyekre ez a réteg válaszolhat. Az ID által fémjelzett tulajdonságok csoportja határozza meg az objektumok helyét, színét, láthatóságát, és még rengeteg más dolgot, amelyekre nem térek most ki. Aki kíváncsi mégis ezekre, a szükséges információkat bármely magára adó HTML4.0 könyvben megtalálhatja.

A tulajdonságokat a CSS (Cascading Style Sheets) segítségével fogjuk bevezetni a köztudatba a következő módon: A HTML dokumentum forrásába be kell raknunk a <STYLE> </STYLE> tagok közé a tulajdonsággyűjtemény nevét egy diez jel után (#), és végül a tulajdonságokat is, kapcsos zárójelek közé zárva, vesszővel elválasztva, szigorúan betartva a Tulajdonság:Érték formátumot. A leggyakrabban használt tulajdonságok a következők:

Left, Top, Right, Bottom – Ezekkel tudjuk megadni az objektum elhelyezkedését, illetve méreteit. Pixelekben számolandó.

Visibility – Ez megmondja, az objektum láthatóságát. Magától értetődően, értékei lehetnek Hidden, vagy Visible.

Position – Lehet Absolute vagy Relative. A kettő közti különbség abban merül ki, hogy ha Absolute pozicionálást adunk egy objektumnak, akkor az objektum az őt tartalmazó objektumon belül (általában maga a lap) azon a helyen fog megjelenni, amelyet megadtunk neki a Left/Right koordinátákkal, ha meg Relative, akkor attól a pozíciótól lesz eltolva Left/Right értékkel, ahol egyébként megjelent volna.

A példaprogram például a következő tulajdonságokat használja:

<STYLE>
#Coding {Position : Absolute ; Left : 0px ; Top : 0px ; Width : 110px ; Height : 24px}
#Art {Position : Absolute ; Left : 110px ; Top : 0px ; Width : 103px ; Height : 24px}
#CodingMenu {Position : Absolute ; Left : 0px ; Top : 24px ; Width : 110px ; Height : 53px ; Visibility : Hidden}
#ArtMenu {Position : Absolute ; Left : 110px ; Top : 24px ; Width : 103px ; Height : 53px ; Visibility : Hidden}
</STYLE>

Tehát van négy darab layer-em, egy-egy a két menünek, és a másik kettő pedig azoknak az objektumoknak, melyek előidézik a menük megjelenését, mihelyst az egér elcsusszant fölöttük. És az egészben a legszebb az, hogy nekünk egy sor kódot sem kell írni, hogyha vizsgálni akarjuk az egér helyzetét a képernyőn. A böngésző automatikusan meghívja a megfelelő függvényeket (onMouseOver, onMouseOut) a megfelelő eseménynek. És ezekben az eseményekben nem kell mást tenni, csak meghívni egy függvényt, amely megmutatja, vagy elrejti az éppen aktuális menüt. Például álljon itt az egyik függvény:

function MenuShow(menu_idx)
{
  switch(menu_idx)
  {
   case 0:  document.all.item("CodingMenu",0).style.visibility="visible";
            window.status="Coding stuff...";
            break;
   case 1:  document.all.item("ArtMenu",0).style.visibility="visible";
            window.status="Art like stuff...";
            break;
  }
}

Figyeljük meg, hogy milyen módon hivatkozunk a CodingMenu menüre. Most már igazán nem maradt más hátra, mint közkinccsé tenni az oldal teljes forráskódját:

<HTML>
<TITLE>Menu demonstration</TITLE>
<BODY BGCOLOR="black">
<STYLE>
   #Coding     {Position : Absolute ; Left : 0px ; Top : 0px ; Width : 110px ; Height : 24px}
   #Art        {Position : Absolute ; Left : 110px ; Top : 0px ; Width : 103px ; Height : 24px}
   #CodingMenu {Position : Absolute ; Left : 0px ; Top : 24px ; Width : 110px ; Height : 53px ;
                         Visibility : Hidden}
  #ArtMenu  {Position : Absolute ; Left : 110px ; Top : 24px ; Width : 103px ; Height : 53px ;
                    Visibility : Hidden}
</STYLE>
<SCRIPT>
 window.status="Welcome";
 function MenuShow(menu_idx)
 {
  switch(menu_idx)
  {
   case 0:  document.all.item("CodingMenu",0).style.visibility="visible";
            window.status="Coding stuff...";
            break;
   case 1:  document.all.item("ArtMenu",0).style.visibility="visible";
            window.status="Art like stuff...";
            break;
  }
 }
 
 function MenuHide(menu_idx)
 {
  switch(menu_idx)
  {
   case 0:  document.all.item("CodingMenu",0).style.visibility="hidden";
            window.status="Welcome";
            break;
   case 1:  document.all.item("ArtMenu",0).style.visibility="hidden";
            window.status="Welcome";
            break;
  }
 }
 
</SCRIPT>
 
<DIV ID=Coding TITLE="Coding Menu" onMouseOver="MenuShow(0);"
         onMouseOut="MenuHide(0);">
 <IMG SRC="coding.jpg" WIDTH="110" HEIGHT="24" BORDER="0">
</DIV>
 
<DIV ID=Art onMouseOver="MenuShow(1);" onMouseOut="MenuHide(1);">
 <IMG SRC="art.jpg" WIDTH="103" HEIGHT="24" BORDER="0">
</DIV>
 
<DIV ID=CodingMenu onMouseOver="MenuShow(0);" onMouseOut="MenuHide(0);">
 <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="110">
        <TR>
            <TD WIDTH="100%">
            <A HREF="about:blank">
               <IMG SRC="visc.jpg" WIDTH="110" HEIGHT="14" 
                        ALIGN="BOTTOM" BORDER="0">
            </A>
         </TD>
        </TR>
        <TR>
            <TD WIDTH="100%">
            <A HREF="about:blank">
               <IMG SRC="delph.jpg" WIDTH="110" HEIGHT="19" 
                        ALIGN="BOTTOM" BORDER="0">
            </A>
         </TD>
        </TR>
        <TR>
            <TD WIDTH="100%">
            <A HREF="about:blank">
               <IMG SRC="asm.jpg" WIDTH="110" HEIGHT="20" ALIGN="BOTTOM" BORDER="0">
            </A>
            </TD>
        </TR>
 </TABLE>
</DIV>
 
<DIV ID=ArtMenu onMouseOver="MenuShow(1);" onMouseOut="MenuHide(1);">
 <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="103">
        <TR>
            <TD WIDTH="103">
           <A HREF="about:blank">
              <IMG SRC="arhit.jpg" WIDTH="103" HEIGHT="14" ALIGN="BOTTOM" BORDER="0">
           </A>
         </TD>
        </TR>
        <TR>
            <TD WIDTH="103">
           <A HREF="about:blank">
               <IMG SRC="lit.jpg" WIDTH="103" HEIGHT="19" ALIGN="BOTTOM" BORDER="0">
           </A>
         </TD>
        </TR>
        <TR>
            <TD WIDTH="103">
           <A HREF="about:blank">
             <IMG SRC="pain.jpg" WIDTH="103" HEIGHT="20" ALIGN="BOTTOM" BORDER="0">
           </A>
            </TD>
        </TR>
 </TABLE>
</DIV>
 
 
</BODY>
<P><P><P>
<font color="white" face="arial" size=6><BR>
This tries to show you how to use menus on your web page.

</HTML>

És végül itt az eredmény.

Deák Ferenc