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> 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 |