Hallo,
ich bins schon seit Tagen auf der Suche nach einem guten Menü. Das beste was ich gefunden hab, war ein Menü von einem Beitrag in tutorials.de.
Kan mir das wer so umbauen, das es auch nach links funktioniert?
Sturm
ich bins schon seit Tagen auf der Suche nach einem guten Menü. Das beste was ich gefunden hab, war ein Menü von einem Beitrag in tutorials.de.
Kan mir das wer so umbauen, das es auch nach links funktioniert?
HTML:
<script type="text/javascript">
<!--
//Korrektur der Submenu-Position
intXPadding = 1;
intYPadding = 0;
//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;
blnType = (objElem.rows.length > 1) ? 1 : 0;
intItems=(blnType)? objElem.rows.length: objElem.rows[0].cells.length
for(i = 0; i < intItems; ++i)
{
objCell = (blnType)? objElem.rows[i].cells[0] : 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 = (blnType)
? (objCell.offsetLeft + (objMenu.offsetLeft - objSub.rows[0].cells[0].offsetLeft) + objCell.offsetWidth) + intXPadding
: (objCell.offsetLeft + (objSub.offsetLeft - objSub.rows[0].cells[0].offsetLeft)) + intXPadding;
objSub.style.top = (blnType)
? objCell.offsetTop + (objMenu.offsetTop - objElem.rows[0].cells[0].offsetTop) + intYPadding
: objCell.offsetHeight + (objMenu.offsetTop + objElem.rows[0].cells[0].offsetTop)+ intYPadding;
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>
<!--
*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>
</tr>
<tr>
<td><a href="#">Main#2</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>
</div>Sturm
