<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
//Korrektur der Submenu-Position
intXPadding = 0;
intYPadding = -4;
//Zeit bis zum Schliessen(ms)
intTimeout = 50;
//hier werden später die Timeouts gespeichert... jeweils separat für jedes Submenu
arrTimeouts = new Array();
/**
* liefert beim Initialisieren des Menues zum jeweiligen Hauptmenupunkt
* die passende Tabbelle
* objMenu=Elternknoten der Hauptmenu-Tabelle
* intSub=Index des Menupunktes
**/
function get_sub(objMenu, intSub)
{
intTable =- 1;
for(j = 0; j < objMenu.childNodes.length; ++j)
{
intTable += (objMenu.childNodes[j].tagName=='TABLE') ? 1 : 0;
if(intTable==intSub)
{
return(objMenu.childNodes[j]);
}
arrTimeouts.push(false);
}
return false;
}
/**
* Initialisiert das Menu beim ersten mouseover der Hauptmenupunkte-Tabelle
* ansonsten anzeigen/verstecken der jeweiligen Submenu-Tabelle
* objElem = (erster Aufruf)?Hauptmenupunktabelle:Index Menupunkt
* blnEvt = (!erster Aufruf)?(over=1||out=0):nix;
**/
function menu(objElem, blnEvt)
{
//initalisieren de Menues beim ersten Aufruf
if(arrTimeouts.length == 0)
{
objElem.onmouseover = new Function('f','return false');
objMenu = objElem.parentNode;
for(i = 0; i < objElem.rows[0].cells.length; ++i)
{
objCell = objElem.rows[0].cells[i];
objCell.onmouseover = new Function('f', 'menu('+i+', 1)');
objCell.onmouseout = new Function('f',' menu('+i+', 0)');
objSub = get_sub(objMenu, i+1);
objSub.style.position = 'absolute';
objSub.style.left = intXPadding +
(objCell.offsetLeft + (objSub.offsetLeft - objSub.rows[0].cells[0].offsetLeft));
objSub.style.top = intYPadding +
objCell.offsetHeight +
(objCell.offsetTop + (objSub.offsetTop - objSub.rows[0].cells[0].offsetHeight));
objSub.id = 'sub'+i;
objSub.width = 1; //fixt opera-Macke mit Tabellenbreite
objSub.onclick = new Function('f', 'this.style.visibility = "hidden"');
objSub.onmouseover = new Function('f', 'menu('+i+', 1)');
objSub.onmouseout = new Function('f', 'menu('+i+', 0)');
objSub.className = 'sub';
}
return;
}
//Zeigen
if(blnEvt)
{
clearTimeout(arrTimeouts[objElem]);
document.getElementById('sub'+objElem).style.visibility = "visible";
}
//Verstecken
else
{
arrTimeouts[objElem] = setTimeout('document.getElementById("sub'+objElem+'").style.visibility="hidden"', intTimeout);
}
}
//-->
</script>
<body>
<!--
*alle Menutabellen(und nur diese) in einem div verpacken
*erste Tabelle für Hauptmenupunkt
*für jeden Hauptmenupunkt eine weitere Tabelle mit Submenu
*für leeren Hauptmenupunkt siehe 4. Tabelle
*in erste Tabelle [onmouseover="menu(this)"]
*andere Tabellen [style="visibility:hidden"]
*der Klassenname des div's ist nur für Gestaltung per CSS von Interesse
*die Submenue-Tabellen erhalten vom Skript den Klassennamen "sub"(auch zwecks Gestaltung)
-->
<div class="menu">
<table onmouseover="menu(this)">
<tr>
<td><a href="#">Main#1</a></td>
<td><a href="#">Main#2</a></td>
<td><a href="#">Main#3(leer)</a></td>
<td><a href="#">Main#4</a></td>
</tr>
</table>
<table style="visibility:hidden">
<tr><td><a href="#">Sub#1_1</a></td></tr>
<tr><td><a href="#">Sub#1_2</a></td></tr>
<tr><td><a href="#">Sub#1_3</a></td></tr>
<tr><td><a href="#">Sub#1_4</a></td></tr>
</table>
<table style="visibility:hidden">
<tr><td><a href="#">Sub#2_1</a></td></tr>
<tr><td><a href="#">Sub#2_2</a></td></tr>
<tr><td><a href="#">Sub#2_3</a></td></tr>
</table>
<table style="display:none">
<tr><td></td></tr>
</table>
<table style="visibility:hidden">
<tr><td><a href="#">Sub#4_1</a></td></tr>
<tr><td><a href="#">Sub#4_2</a></td></tr>
<tr><td><a href="#">Sub#4_3</a></td></tr>
<tr><td><a href="#">Sub#4_4</a></td></tr>
<tr><td><a href="#">Sub#4_5</a></td></tr>
<tr><td><a href="#">Sub#4_6</a></td></tr>
</table>
</div>
</body>
</html>
