Weblap navigációs fa 1429
A navigációs fa, bemutatója.
A hivatkozások előtt látható [+] jel, azt jelzi, hogy a témakör zárva van, de további hivatkozásokat, vagy témaköröket tartalmaz.
A témakör megnyitásakor, [-] jel lesz látható, azaz a témakör nyitva van.
Amelyik témakör előtt nem látható [+] jel, az nem tartalmaz további témaköröket.
1. Bemutató
Hivatkozás, az egérrel történő kattintásokra reagál
Tesztelés:
Megnyitáshoz, kattintsunk a kiválasztott témakörre. Bezáráshoz, ismételten kattintsunk az adott témakörre.
2. Bemutató
Hivatkozás a következő eseményekre reagál: az egér a hivatkozás felett, vagy elhagyja a hivatkozást,
Tesztelés:
Megnyitáshoz, mozgassuk az egeret, a kiválasztott témakörre. Bezáráshoz, mozgassuk el az egeret, az adott témakörről.
Megjegyzés:
A második bemutató formátum felfedi a további témaköröket, de ezek csak olvashatók, azaz hiába próbálunk a megjelenő hivatkozások közül bármelyikre is kattintani, nem tudunk, mivel az egér elmozdulásával el is tűnnek.
Ezért, ezt a variációt, a témakörök tartalomjegyzékeként alkalmazhatjuk, azaz ha a fő témakör fölé visszük az egeret, megjeleníthetjük annak belső témaköreit.
De alkalmazhatjuk, rövidebb vagy hosszabb, tájékoztatószövegek megjelenítésére is.
XHTML fájl
<head>
<title>Navigációs fa </title>
<style>
a {text-decoration: none;}
#cegekmenu, #termekmenu, #kapcsolatmenu, #kapcsolat2menu {display: none; margin-left: 2em; }
#Cegek2menu, #Termek2menu, #Kapcsolat3menu, #Kapcsolat4menu {display: none; margin-left: 2em; }
</style>
</head>
<body>
<h1> Navigációs fa </h1>
<h5> 1. Bemutató </h5>
<ul>
<li><a id="cegek" href="#"> [+] Cégek </a>
<ul id="cegekmenu">
<li><a href="femipar.html">Fémipar </a></li>
<li><a href="mezogazdasag.html"> Mezőgazdaság</a></li>
<li><a href="elelmiszer.html"> Élelmiszer</a></li>
</ul>
</li>
<li><a id="termek" href="#"> [+] Termékek </a>
<ul id="termekmenu">
<li><a href="ipari.html">Ipari termékek </a></li>
<li><a href="lakossagi.html">Lakossági termékek</a></li>
</ul>
</li>
<li><a id="sport" href="#"> Sport </a>
<li><a id="kapcsolat" href="#"> [+] Elérhetőségek </a>
<ul id="kapcsolatmenu">
<li><a href="levelezes.html">Levelezési cím</a></li>
<li><a href="telefon.html">Telefon</a></li>
</ul>
</li>
<li><a id="kapcsolat2" href="#"> [+] Elérhetőségek2 </a>
<ul id="kapcsolat2menu">
<li><a href="levelezes2.html">Levelezési cím2</a></li>
<li><a href="telefon2.html">Telefon2</a></li>
</ul>
</li>
</ul>
<h5> 2. Bemutató </h5>
<ul>
<li><a id="Cegek2" href="#"> [+] Cégek </a>
<ul id="Cegek2menu">
<li><a href="Femipar2.html">Fémipar </a></li>
<li><a href="Mezogazdasag2.html"> Mezőgazdaság</a></li>
<li><a href="Elelmiszer2.html"> Élelmiszer</a></li>
</ul>
</li>
<li><a id="Termek2" href="#"> [+] Termékek </a>
<ul id="Termek2menu">
<li><a href="ipari.html">Ipari termékek </a></li>
<li><a href="lakossagi.html">Lakossági termékek</a></li>
</ul>
</li>
<li><a id="sport" href="#"> Sport </a>
<li><a id="Kapcsolat3" href="#"> [+] Elérhetőségek </a>
<ul id="Kapcsolat3menu">
<li><a href="levelezes.html">Levelezési cím</a></li>
<li><a href="telefon.html">Telefon</a></li>
</ul>
</li>
<li><a id="Kapcsolat4" href="#"> [+] Elérhetőségek2 </a>
<ul id="Kapcsolat4menu">
<li><a href="levelezes2.html">Levelezési cím2</a></li>
<li><a href="telefon2.html">Telefon2</a></li>
</ul>
</li>
</ul>
<script language="javascript" type="text/javascript" src="elérési út.js" > </script>
</body>
JavaScript fájl
function Toggle(e) {
// Ezt, ne próbáljuk meg, régi böngészőben. De bízzunk benne, hogy mára-már, mindenki újat használ!
if (!document.getElementById) return;
//Az eseményobjektum lekérdezése
if (!e) var e=window.event;
//Melyik hivatkozásra kattintottak?
whichlink = (e.target) ? e.target.id : e.srcElement.id;
//Menüobjektum lekérdezése
obj=document.getElementById(whichlink+"menu");
//Látható a menü?
visible = (obj.style.display=="block")
//A key objektum (ahivatkozás) lekérdezése
key=document.getElementById(whichlink);
//A név (azonosítók cegek, termek, kapcsolat stb.) lekérdezése
// A substring(3) jelentése: Teljes csoportnév, az első három karakter kivételével
// Példa: Az első csoport elnevezése "Cégek" Eredmény = ek
keyname = key.firstChild.nodeValue.substring(3);
if(visible) {
//A menü elrejtése, és az előjel beállítása [+] -ra
obj.style.display="none";
key.firstChild.nodeValue = "[+]" + keyname;
}
else {
// Menü felfedése, és az előjel beállítása [-] -ra
obj.style.display="block";
key.firstChild.nodeValue = "[-]" + keyname;
}
}
// Első bemutatóhoz tartozó vezérlők ( onclick )
document.getElementById("cegek").onclick=Toggle;
document.getElementById("termek").onclick=Toggle;
document.getElementById("kapcsolat").onclick=Toggle;
document.getElementById("kapcsolat2").onclick=Toggle;
// Második bemutatóhoz tartozó vezérlők ( onmouseover és onmouseout )
document.getElementById("Cegek2").onmouseover=Toggle;
document.getElementById("Cegek2").onmouseout=Toggle;
document.getElementById("Termek2").onmouseover=Toggle;
document.getElementById("Termek2").onmouseout=Toggle;
document.getElementById("Kapcsolat3").onmouseover=Toggle;
document.getElementById("Kapcsolat3").onmouseout=Toggle;
document.getElementById("Kapcsolat4").onmouseover=Toggle;
document.getElementById("Kapcsolat4").onmouseout=Toggle;
//onmouseover ---- egér a hivatkozás felett
//onmouseout ------ egér a hivatkozást elhagyja
//onclick -------------- hivatkozásra történő kattintás
Ezen a HTML oldalon, a hivatkozások egy többszintű listát alkotnak, melyet az <ul> és <li> elemek közé írunk.
Megírhatnánk <div> elemekkel is, de így, listás felsorolást kapunk, mely egy fa szerkezetet alkot.
A régebbi böngészők is megjelenítik, igaz nem lesz dinamikus megjelenésű formája, de a hivatkozások működni fognak.
Mindegyik csoport egyedi azonosítóval, és egy elsődleges hivatkozással rendelkezik.
Minden horgony <a> elemhez, tartozik egyedi id azonosító.
Az elsődleges hivatkozások, az elsőszintű <li> elemekben helyezkednek el, ezekre kattintva fedhetjük fel, az adott csoportba tartozó, alsóbb szintű hivatkozásokat.
Az alsóbb szintű hivatkozások a második szintű <ul> <li> elemek között helyezkednek el.
A JavaScript meghívó utasítást, a dokumentum végén helyezzük el, így a program, eseménykezelőket adhat az oldal elemeihez.
A <head> szakaszban megírt stílusok <style> a hivatkozások megjelenésének formázását, és az almenük, elrejtését határozza meg.
JavaScript fájlban:
A menük elrejtése, felfedése a Toggle() függvény feladata.
Egy if utasítással határozza meg, hogy éppen mit tegyen: menü látható, akkor elrejti, ha rejtett, akkor felfedi.
Elrejtéshez és felfedéshez, a hivatkozások neve elé egy [+] vagy [-] jel kerül, a szöveges csomópont nodeValue jellemzőjének módosításával.
A program utolsó sorai, az elsőszintű (felsőszintű) hivatkozásokat keresi meg, és azok onclick eseménykezelőihez rendeli a Toggle() függvényt.
Az adott főcsoport egyedi id azonosítónak, meg kell egyezni a hozzá tartózó alcsoport <ul> elem id azonosítójával, azzal a különbséggel, hogy hozzáíródik a menu szöveg.
Példa:
Főcsoport: <li> <a id="cegek"> Alcsoport <ul id="cegekmenu">
Megjegyzés:
Otthoni gyakorlásnál, az oldal betöltésekor:
- Engedélyezni kell a JavaScript működését, melyre egy figyelmeztetés jelenik meg.