JavaScript menü – gondolatok

 

Ez az első cikkem. Inkább egy kis kreativitást adok át, mint tudást. Így kezdésnek, valami látványos dolgot terveztem, íme.

 

A mai weblapok nagy többsége használ flash-t. Ez egy szép dolog. Magam is szoktam vele dolgozni, de nekem ez túlságosan is RAD. Így maradt a JavaScript. Mikor az oldalunkat terveztem, elsődleges szempont volt az áttekinthetőség. Így egy csoportosított menürendszert találtam ki.

 

A JavaScript

 

A JavaScript egy kliens oldalon futó program, amit html oldalon történt eseményekhez lehet társítani. A JavaScript eléri az oldal összes elemét (form mezők, képek, az oldal tulajdonságai...). Ez azért jó, mert ezeket lehet módosítani. Erre épül az első menü is. Ez a html által használt layerek visibility tulajdonságát állítja át.

Egy html elemet a document.elemnév utasítással lehet elérni.

Fontos! Mivel az IExplorer és a Netscape különféle módon generálják a layereket, ezért vigyázni kell a kompatíbilisságra (azaz, hogy lehetőleg mindkettőn fusson). Az itt leírt módszerek IExplorerre íródtak és működtek is. Fontos az is, hogy a JavaScript case sensitive nyelv, azaz különbséget tesz a kis és nagybetűk között. Először ezt ajánlatos ellenőrizni, ha valami nem működik.

 

Layerek

Sok layeres cikkben így mutatják be a layert: "Aki dolgozott már korszerű képfeldolgozóval, az találkozott a layerekkel is". Ilyen például a PaintShop Pro is. De ez lényegtelen. A layer egy fóliának felfogható valami, lehet rá tenni képet, linket, szöveget, mindent! Hogy miért jó ez? Hát pl. egymásra tudsz rakni két képet, de semmi olyat nem lehet vele csinálni, amit egy jó képszerkesztő nem tud.

A layer definíciója:

<div id="layer" style="position:absolute, left:100px, top:100px, width:100px, height:100px, visibility:visible">

Ez gondolom magáért beszél. Kivéve a visibility-t ez arra jó, hogy a layert el lehet tüntetni. Lehet visible, vagy hidden (gyk.: visible = látható hidden = rejtett).

 

Összefüggések

Tehát akkor itt jön a lényeg. Először is kreálni kell egy linket, mivel az alap html szabványban a képeknek, szövegeknek nincs egérérzékelő metódusuk. Ez a link lehet mondjuk ilyen:

 

<a href="#" onClick="mutat()">Mutat</a>

 

Az onclick, az az esemény, amihez a JavaScript függvényt társítjuk. Ez akkor következik be, ha kattintanak a linkre, ami persze már lehet kép is és szöveg is. Itt egy megjelenítési függvényt lehet hívni. Most kell egy, ami eltünteti a layert:

 

<a href="#" onClick="rejt()">Rejt</a>

 

Ez után meg kell csinálni a layert. A layernél a id a layer neve, így tehát:

 

<div id="layer" style="position:absolute (ennek az a lényege, hogy mindig a böngésző ablakára vonatkozik a layer pozíciója, nem a div kezdetére), left:100px, top:100px, width:100px, height:100px, visibility: hidden">Menu 1 </div>  

 

Most jön a JavaScript függvény. Ezt <script language="javascript"> </script> tag-ek közé kell zárni. Lehetőleg a fájl elejére kerül. Jobb ezt megszokni, hogy ne keverjük az oldalon össze-vissza a JavaScript részleteket. Olyan ez, mint a más nyelvekben megszokott deklaráció és a függvények megírása, miután ezeket megvalósítottuk, már a teljes programból hivatkozhatunk rájuk. Nem utolsó sorban pedig a JS kód külön szöveges fájlban is elhelyezhető, általában .js kiterjesztéssel és ekkor nem kell minden html lapra külön beírni az egészet: <script language="JavaScript" src="menu.js"></script>

Tehát:

<script language="javascript">

function Mutat() {

var layer = document.all["layer"].style;

 

A function gondolom ismerős más nyelvekből. Azért nem document.layer névvel hivatkoztam rá, mert a layerek nem tartoznak külön csoportba. Így az oldal összes eleméből vettem ki, név szerint. A var szintén ismerős lehet. Változó deklarációt (definíciót is, mint jelen esetben) tesz lehetővé.

 

layer.visibility = "visible";

}

 

Tulajdonképpen itt a létrehozott változó által mutatott objektum visibility tulajdonságát állítottam láthatóra. A rejt függvény ugyanez azzal a különbséggel, hogy a láthatóságot megszüntetjük, de azért leírom.

 

function Rejt() {

var layer = document.all["layer"].style;

layer.visibility = "hidden";

}

</script>

 

Csak a visible-t kellett hidden-re átírni. Hát ennyi. Így ha ráklikkeltünk a linkre, akkor megjelenik a layer. Ha a másik linkre kattintunk, akkor eltűnik.

 

Végszó

 

Ennek felhasználásával egy igen pofás kis menüt lehet összedobni. A mi oldalunkon (http://www.dblegends.ini.hu) ugyanilyen menü van. Nálunk az onmouseover (az egér a kép fölött halad át) eseményhez van rendelve a mutatás. Az elrejtés pedig az "almenü"-n való kattintáshoz. Ha függvény paraméterként átadod a layer nevét, akkor egy csomó gépeléstől mented meg magad. Így nem kell minden layerre új függvényt írni. Végül, hogy az aktivált menü eltűnjön, ha másik "főmenü"-re viszed az egeret, bevittem egy globális változót. Ez aktiv névre hallgat. Annak a layernek a nevét tartalmazza, ami épp látható. Ezt a  megjelenítése után teszem bele. Az előzőt (megnyitott almenüt, amit az előző megnyitásnál tettem bele), pedig eltüntetem. Egyetlen hátránya, hogy ha megjelenítesz egy almenüt, és újra ráviszed az egeret, akkor eltűnik. És ha még egyszer ráviszed, nem jelenik meg. Bár most erre is kitaláltam valamit. Ellenőrizni kell, hogy az aktiv egyenlő-e a most megjelenítettel. Ha igen, akkor nem kell eltüntetni.

A teljes kód megtekinthető a fent leírt oldal forrásában és ott a működés is tanulmányozható.

 

Faragó József - atyya@index.hu