Navigáció vagy tájékoztató, div szakaszokkal 1430
Navigációs fa, vagy tájékoztató témakörök bemutatója. div szakaszokkal
Tesztelés:
Megnyitáshoz, kattintsunk a kiválasztott témakörre. Bezáráshoz, ismételten kattintsunk az adott témakörre.
Ezen oldal úgy lett megírva, hogy a témakörök menüi, nem tartalmaznak hivatkozási sorokat, csak leírásokat, azaz tájékoztató szöveget.
A sorok elejéről törölve lettek a [+]; és [-]; pillanatnyi állapotot jelző elemek
Az egyedi azonosítók, rövidebbek és sorszámjelleggel készültek.
Példa: d1, d2, d3, d4, és d1menu, d2menu, d3menu, d4menu,
Első 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.
Termékek
Elérhetőségek
Elérhetőségek2
Második 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.
Termékek
Elérhetőségek
Elérhetőségek2
Megjegyzés:
A második bemutató formátum felfedi a további témaköröket, de ezek csak olvashatók.
Szövegrészt kijelölni, átmásolni nem lehet, azaz hiába próbálunk, mivel az egér elmozdulásával el is tűnnek a tájékoztató szövegek.
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.
Stílusok:
Mivel kevés stílus meghatározást kell írnunk, megírhatjuk közvetlen a head szakaszban is.
De stílusokat nem csak ezen div szakaszokhoz készítünk, hanem címsorok, bekezdések, háttérszín, stb.
Ezért érdemes ezen meghatározásokat is, külön CSS, azaz stílus fájlban megírni.
XHTML fájl
<head>
<title>Navigációs fa </title>
<style>
a{text-decoration:none; color: black; font-size: 12px;}
#d1menu, #d2menu, #d3menu, #d4menu {display: none; font-size: 12px;}
#dd1menu, #dd2menu, #dd3menu, #dd4menu {display: none; font-size: 12px;}
.valasz{ margin-left: 2em; font-size: 12px;}
</style>
</head>
<body>
<h1> Navigáció vagy tájékoztató div szakaszokkal </h1>
<h5> Első bemutató </h5>
<a id="d1" href="#"> Cégek </a> <br />
<div id="d1menu">
<p class="valasz"><u><b>Élelmiszer</b></u><br />Mivel ez nem hivatkozási sor: Ideírhatunk az élelmiszergyártásokról, tetszőleges hosszúságú témakört, azaz tájékoztató szöveget. </p>
</div>
<a id="d2" href="#">Termékek </a><br />
<div id="d2menu">
<p class="valasz"><u><b>Ipari termékek</b></u><br />Mivel ez nem hivatkozási sor: Ide is írhatunk, tetszőleges hosszúságú témakört, azaz tájékoztató szöveget.</p>
</div>
<a id="d3" href="#"> Elérhetőségek </a><br />
<div id="d3menu">
<p class="valasz"><u><b>Levelezési cím</b></u><br />Mivel ez nem hivatkozási sor: Ide is írhatunk, tetszőleges hosszúságú témakört, azaz tájékoztató szöveget.</p>
</div>
<a id="d4" href="#"> Elérhetőségek2 </a><br />
<div id="d4menu">
<p class="valasz"><u><b>Levelezési cím2</b></u><br />Mivel ez nem hivatkozási sor: Ide is írhatunk, tetszőleges hosszúságú témakört, azaz tájékoztató szöveget.</p>
</div>
<h5> Második bemutató </h5>
<a id="dd1" href="#"> Cégek </a> <br />
<div id="dd1menu">
<p class="valasz"><u><b>Élelmiszer</b></u><br />Mivel ez nem hivatkozási sor: Ideírhatunk az élelmiszergyártásokról, tetszőleges hosszúságú témakört, azaz tájékoztató szöveget. </p>
</div>
<a id="dd2" href="#">Termékek </a><br />
<div id="dd2menu">
<p class="valasz"><u><b>Ipari termékek</b></u><br />Mivel ez nem hivatkozási sor: Ide is írhatunk, tetszőleges hosszúságú témakört, azaz tájékoztató szöveget.</p>
</div>
<a id="dd3" href="#"> Elérhetőségek </a><br />
<div id="dd3menu">
<p class="valasz"><u><b>Levelezési cím</b></u><br />Mivel ez nem hivatkozási sor: Ide is írhatunk, tetszőleges hosszúságú témakört, azaz tájékoztató szöveget.</p>
</div>
<a id="dd4" href="#"> Elérhetőségek2 </a><br />
<div id="dd4menu">
<p class="valasz"><u><b>Levelezési cím2</b></u><br />Mivel ez nem hivatkozási sor: Ide is írhatunk, tetszőleges hosszúságú témakört, azaz tájékoztató szöveget.</p>
</div>
<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 d1, d2, d3, d4, 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
obj.style.display="none";
}
else {
// Menü felfedése
obj.style.display="block";
}
}
// Első bemutatóhoz tartozó vezérlők
document.getElementById("d1").onclick=Toggle;
document.getElementById("d2").onclick=Toggle;
document.getElementById("d3").onclick=Toggle;
document.getElementById("d4").onclick=Toggle;
// Második bemutatóhoz tartozó vezérlők
document.getElementById("dd1").onmouseover=Toggle;
document.getElementById("dd1").onmouseout=Toggle;
document.getElementById("dd2").onmouseover=Toggle;
document.getElementById("dd2").onmouseout=Toggle;
document.getElementById("dd3").onmouseover=Toggle;
document.getElementById("dd3").onmouseout=Toggle;
document.getElementById("dd4").onmouseover=Toggle;
document.getElementById("dd4").onmouseout=Toggle;
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.
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="d2"> Alcsoport <ul id="d2menu">
Megjegyzés:
Az oldal betöltésekor:
- Engedélyezni kell a JavaScript működését, melyre egy figyelmeztetés jelenik meg.
- Rövid felvillanást láthatunk, és mind az öt kép megjelenhet, mielőtt a program elrejtené azokat.
Ezt, kiküszöbölhetjük a stíluslapon, ha a jelölőelem osztályazonosítójához adjuk, a display: none CSS szabályt.
Így, minden általunk meghatározott jelölőelem (objektum) tartalma láthatatlan marad, amíg a program meg nem jeleníti az első jelölőelem (objektum) tartalmát.