[DropDownMenu III]




















Dieses Script, eine Variante des DropDownMenu II, erzeugt eine Navigation, bei der Untermenus auf- und zugeklappt werden können. (Das Zuklappen passiert automatisch bei Anwahl eines anderen Menu- Items). Zusätzlich wird oberhalb der Navigation für jedes Menu- Item bei Mouseover eine Grafik angezeigt.

Hinweis: Wie im Listing des Codes ersichtlich, setzt das Script auf Stylesheets. Die Styles können Sie nach Belieben definieren, wichtig ist hierbei, dass folgende zwei Klassen in der Definition enthalten sind:

.menu {
font-family: Verdana, Arial unicode MS, Helvetica, sans-serif,
font-size: 8pt;
color: #8080FF;
text-decoration: none;
}

.sub {
display: none;
color: #8080FF;
text decoration: none;
}

Zur Funktionsweise: Mittels Eventhandler onmousedown wird die Funktion doMenu ausgeführt. Dieser Funktion werden als Parameter der Name des Submenus sowie seine Eigenschaft übergeben. Als Eigenschaften stehen hier die Werte 'block' (anzeigen) und 'none' (nicht anzeigen) zur Wahl. Die Funktion muss jeweils für jedes Submenu ausgeführt werden, dh. bspw. "Mach Submenu1 auf und schliesse Submenu2". Je nach Anzahl der eingesetzten Submenus muss die Funktion entsprechend oft eingesetzt werden.
Die Grafiken werden in einem Array gespeichert, die entsprechende Grafik wird beim Mouseover über seine Indexnummer angezeigt.

[Code]

[zwischen <HEAD> und </HEAD>]

<link href="DropDownMenu3.css" type="text/css" rel="stylesheet">
<script language="JavaScript1.2">
// Hier werden die Menu- Grafiken in einem Array gespeichert //
thumb=new Array(6); // 6 entspricht 7 Grafiken, da JS bei 0 zu zählen beginnt, erweitern Sie das Array bei Bedarf
thumb[0] = new Image();
thumb[1] = new Image();
thumb[2] = new Image();
thumb[3] = new Image();
thumb[4] = new Image();
thumb[5] = new Image();
thumb[6] = new Image();

thumb[0].src="grafik0.gif"; //Setzen Sie hier Ihre Grafiken ein
thumb[1].src="grafik1.gif";
thumb[2].src="grafik2.gif";
thumb[3].src="grafik3.gif";
thumb[4].src="grafik4.gif";
thumb[5].src="grafik5.gif";
thumb[6].src="grafik6.gif";

function doMenu(id,display) {
document.getElementById(id).style.display = display;
}

function mouseover(number) {

document.getElementById('thumb').src= thumb[number].src;

}

function mouseout() {

document.getElementById('thumb').src= "black.gif"; // bei Mouseout wird auf die Initialgrafik zurückgeswitched

}

function doMenu(id,display) {
document.getElementById(id).style.display = display;
}
</script>

[zwischen <BODY> und </BODY>]

<img src="black.gif" height="50" width="50" id="thumb" style="position: absolute; left: 30px; top: 10px;">

<div id="menuLayer" style="position: absolute; left: 30px; top: 70px; width: 146px; height: 227px; z-index: 3; visibility: visible">

<a target="I1" href="#" onmouseover="mouseover(0);" onmouseout="mouseout();" onmousedown="doMenu('menu2sub','none');doMenu('menu1sub','none');">Home</a>
<br />
<a target="I1" href="#" onmouseover="mouseover(1);" onmouseout="mouseout();" onmousedown="doMenu('menu2sub','none');doMenu('menu1sub','none');">News</a>
<br />

<b id="menu1" style=";cursor:hand;"><a href="#" onmouseover="mouseover(2);" onmouseout="mouseout();" onmousedown="doMenu('menu1sub','block');doMenu('menu2sub','none');">
<div class="menu">mit Submenu 1</div></a></b>
<div id="menu1sub" class="sub">
<a href="#" onmouseover="mouseover(3);" onmouseout="mouseout();" >Submenu 1 1</a> <br />
<a href="#" onmouseover="mouseover(4);" onmouseout="mouseout();" >Submenu 1 2</a> <br />
<a href="#" onmouseover="mouseover(5);" onmouseout="mouseout();" >Submenu 1 3</a> <br />
<a href="#" onmouseover="mouseover(6);" onmouseout="mouseout();" >Submenu 1 4</a>
</div>

<b id="menu2" ><a href="#" onmouseover="mouseover(0);" onmouseout="mouseout();" onmousedown="doMenu('menu2sub','block');doMenu('menu1sub','none');">
<div class="menu">mit Submenu 2</div></a></b>
<div id="menu2sub" class="sub">
<a href="#" onmouseover="mouseover(1);" onmouseout="mouseout();" >Submenu 2 1</a> <br />
<a href="#" onmouseover="mouseover(2);" onmouseout="mouseout();" >Submenu 2 2</a> <br />
<a href="#" onmouseover="mouseover(3);" onmouseout="mouseout();" >Submenu 2 3</a> <br />
<a href="#" onmouseover="mouseover(4);" onmouseout="mouseout();" >Submenu 2 4</a>
</div>

<a target="I1" href="#" onmouseover="mouseover(5);" onmouseout="mouseout();"onmousedown="doMenu('menu2sub','none');doMenu('menu1sub','none');">noch ein Menu</a><br />
<a target="I1" href="#" onmouseover="mouseover(6);" onmouseout="mouseout();"onmousedown="doMenu('menu2sub','none');doMenu('menu1sub','none');">und noch eins</a><br />

</div>

[Autor]

N8i (www.nightfire.ch)

[Download]

Kopieren Sie bitte den Code

Copyright © 1998- Nightfire Webworker Archiv Script No: 586