Layermenu erweitern?

[Joey]

Ich habe dieses Layermenu von JS-Welt.

Ich habe es jetzt endlich geschafft, es in eine Seite einzubauen. (Gab ein paar Probleme, aber mehr, weil ich recht übernächtigt gewesen bin )
Nun hat dieses Menu aber nur 3 Punkte. Ich selber verstehe von JS nicht allzuviel, und müsste es aber trotzallem auf 9 Menupunkte erweitern.

Ist denn sowas möglich? Und wenn es denn hoffentlich gehen sollte, wäre es klasse, wenn mir jemand erklären würde, wie das geht.

Also, ich hoffe, hier weiss jemand, wie das geht!
Vielen Dank,
Joey

 

[Jenny]

diese js ist ziemlich kompliziert fuer jemand der nicht viel ahnung von js hat, aber ich versuche so gut es geht dir zu erklaeren der untere beispiel hab ich mit ein menupunkt erweitert, damit du ne vorstellung hast, wie du dir fuer deine beduerfnisse anpasst.

also, die fette zellen fuegst du noch fuer jeder weitere menupunkt ein, und fuer jede weitere layer gibst du eine neue ID (fuer die mainmenu = "m_", und die submenu "h_") und z-index.

___________________________________________________

<script language="JavaScript">

function clean ()
{
if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt (0)<'5'))
{
window.document.b.visibility="hide";
window.document.m1.visibility="hide";
window.document.m2.visibility="hide";
window.document.m3.visibility="hide";
window.document.m4.visibility="hide"; ///...m5, m6, m7 usw
return;
}
if (navigator.appVersion.charAt (0)<'5')
{
var layers=document.all.tags ("div");
}
else {
var layers=document.getElementsByTagName("div");
}
layers[0].style.visibility='hidden';
layers[2].style.visibility='hidden';
layers[4].style.visibility='hidden';
layers[6].style.visibility='hidden';
layers[8].style.visibility='hidden'; ///...[10], [12], [14] usw
return;
}

function menu (i)
{

switch(i)
{
case 1:
{
if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt(0)<'5'))
{
window.document.b.visibility="show";
window.document.m1.visibility="show";
window.document.m2.visibility="hide";
window.document.m3.visibility="hide";
window.document.m4.visibility="hide";
return;
}
if (navigator.appVersion.charAt (0)<'5')
{
var layers=document.all.tags ("div");
}
else {
var layers=document.getElementsByTagName("div");
}
layers[0].style.visibility='visible';
layers[2].style.visibility='visible';
layers[4].style.visibility='hidden';
layers[6].style.visibility='hidden';
layers[8].style.visibility='hidden';
return;
}
case 2:
{
if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt(0)<'5'))
{
window.document.b.visibility="show";
window.document.m1.visibility="hide";
window.document.m2.visibility="show";
window.document.m3.visibility="hide";
window.document.m4.visibility="hide";
return;
}
if (navigator.appVersion.charAt (0)<'5')
{
var layers=document.all.tags ("div");
}
else {
var layers=document.getElementsByTagName("div");
}
layers[0].style.visibility='visible';
layers[2].style.visibility='hidden';
layers[4].style.visibility='visible';
layers[6].style.visibility='hidden';
layers[8].style.visibility='hidden';
return;
}
case 3:
{
if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt(0)<'5'))
{
window.document.b.visibility="show";
window.document.m1.visibility="hide";
window.document.m2.visibility="hide";
window.document.m3.visibility="show";
window.document.m4.visibility="hide";
return;
}
if (navigator.appVersion.charAt (0)<'5')
{
var layers=document.all.tags ("div");
}
else {
var layers=document.getElementsByTagName("div");
}
layers[0].style.visibility='visible';
layers[2].style.visibility='hidden';
layers[4].style.visibility='hidden';
layers[6].style.visibility='visible';
layers[8].style.visibility='hidden';
return;
}
case 4: //...5, 6, 7 usw.
{
if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt(0)<'5'))
{
window.document.b.visibility="show";
window.document.m1.visibility="hide";
window.document.m2.visibility="hide";
window.document.m3.visibility="hide";
window.document.m4.visibility="show";
return;
}
if (navigator.appVersion.charAt (0)<'5')
{
var layers=document.all.tags ("div");
}
else {
var layers=document.getElementsByTagName("div");
}
layers[0].style.visibility='visible';
layers[2].style.visibility='hidden';
layers[4].style.visibility='hidden';
layers[6].style.visibility='hidden';
layers[8].style.visibility='visible';
return;
}
}

}
</script>
<div id="b" style="position:absolute; left:30; top:30; width:440; height:170; z-index:1; visibility: hidden">
<a href="#" onMouseOver="clean()" onMouseOut="clean()"> </a> </div>
<div id="h1" style="position:absolute; left:50; top:50; width:100; height:25;z-index:2; visibility: visible">
<a href="#" onmouseover="menu(1)">Menu 1</a>
</div>

<div id="m1" style="position:absolute; left:50; top:75; width:100; height:100; z-index:3; visibility: hidden" >
<a href="#">Punkt 1</a><br>
<a href="#">Punkt 2</a><br>
<a href="#">Punkt 3</a><br>
<a href="#">Punkt 4</a>
</div>

<div id="h2" style="position:absolute; left:150; top:50; width:100; height:25; z-index:4; visibility: visible">
<a href="#" onmouseover="menu(2)">Menu 2</a></div>

<div id="m2" style="position:absolute; left:150; top:75; width:100; height:100; z-index:5; visibility: hidden">
<a href="#">Punkt 1</a><br>
<a href="#">Punkt 2</a><br>
<a href="#">Punkt 3</a><br>
<a href="#">Punkt 4</a>
</div>

<div id="h3" style="position:absolute; left:250; top:50; width:100; height:25; z-index:6">
<a href="#" onmouseover="menu(3)">Menu 3</a>
</div>

<div id="m3" style="position:absolute; left:250; top:75; width:100; height:100; z-index:7; visibility: hidden">
<a href="#">Punkt 1</a><br>
<a href="#">Punkt 2</a><br>
<a href="#">Punkt 3</a><br>
<a href="#">Punkt 4</a>
</div>

<div id="h4" style="position:absolute; left:350; top:50; width:100; height:25; z-index:8">
<a href="#" onmouseover="menu(4)">Menu 4</a>
</div>

<div id="m4" style="position:absolute; left:350; top:75; width:100; height:100; z-index:9; visibility: hidden">
<a href="#">Punkt 1</a><br>
<a href="#">Punkt 2</a><br>
<a href="#">Punkt 3</a><br>
<a href="#">Punkt 4</a>
</div>

 

[Bjoern]

Ziemlich primitives Script.
Ich würde dynamische Menüs erzeugen, die über Eintragungen aus einer Array mit Inhalt gefüllt werden.
Da müsste man dann nur neue Punkte eintragen, und alles läuft.
Na ja, kann nicht alles haben.

 

[Albu]

Das Skript ist nicht primitiv, sonder reichlich umständlich....
Ich versteh nicht, wieso man soviel Quellcode braucht, um ein einfaches Layermenu zu machen?!?!
Vor allem diese Function menu ist ja extrem wartungsintensiv, viel besser wären hier generische Funktionen, die automatisch mitwachsen (siehe z.B. die DW und FW Skripte).

 

[Joey]

Vielen Dank Jenny!
Ich werde mich heute im Laufe des Tages mal daran machen, das Menu bei mir zu erweitern.



@all: Eigentlich hatte ich ja eine Menuvariante aus der DHTML-Central. Doch sobald ich irgendetwas verändert hatte, funktionierte es nicht mehr richtig. Da habe ich dann dieses Script gefunden und bin damit auch ein wenig besser klar gekommen.

 

[mw35]

Danke Leute

Dieses Menu finde ich echt klasse, und es funktioniert
sogar mit NS 4.7

Danke für die Hilfe
Marty