Tweet
Pulldownmenü mit JS und CSS [Problem]
Ich bin grade dabei eine Homepage zu basteln, wo oben auf der Seite das Menü in Form von einem Pulldown ist, das ich mit einen kleinen Teil JS zum Leben erwecke. Soweit funktioniert alles, also ich kann die Menüs ausklappen und sie klappen ohne probleme ein usw. , doch ich habe zwei grawierende Probleme entdeckt:
Mein Problem ist, dass 1. Die Pulldowns von dem Menü bei Frames (in diesem Fall IFrame) zwar angezeigt werden, doch wenn man in den Bereich des Frames gelangt, wo das Pulldown den Frame überlappt, schließt sich das Pulldown. Das zweite Problem ist, dass wenn das Pulldown eine Menüliste (Formularelement) überlappt, die Menüliste über dem Pulldown ist (sihe Bild) (Dieses Problem habe ich aber nur im IE festgestellt. Mit dem FireFox gab es nicht dieses Problem mit der Menüliste.
Ich würde gerne wissen, wie diese Fehler zu beheben sind? Ist dies denn möglich mit meinem (angefangenen) Code? Oder sollte ich auf irgendeine andere Möglichkeit umschwenken?
Teile aus meinem CODE
JS:
und CSS/HTML:
ein Menüpunkt
Unterpunkte zum ersten Menüpunkt:
und die Layer für die Kästen der Unterpunkte siht so aus:
http://www.jumpfield.de/stuff/screen.JPG
Mein Problem ist, dass 1. Die Pulldowns von dem Menü bei Frames (in diesem Fall IFrame) zwar angezeigt werden, doch wenn man in den Bereich des Frames gelangt, wo das Pulldown den Frame überlappt, schließt sich das Pulldown. Das zweite Problem ist, dass wenn das Pulldown eine Menüliste (Formularelement) überlappt, die Menüliste über dem Pulldown ist (sihe Bild) (Dieses Problem habe ich aber nur im IE festgestellt. Mit dem FireFox gab es nicht dieses Problem mit der Menüliste.
Ich würde gerne wissen, wie diese Fehler zu beheben sind? Ist dies denn möglich mit meinem (angefangenen) Code? Oder sollte ich auf irgendeine andere Möglichkeit umschwenken?
Teile aus meinem CODE
JS:
Code:
<script language="JavaScript" type="text/JavaScript">
<!--
function MenueAuf(Men)
{
if(document.getElementById)
{
document.getElementById(Men).style.visibility="visible";
}
else if(document.all && !document.getElementById)
{
document.all[Men].style.visibility="visible";
}
}
function MenueZu(Men)
{
if(document.getElementById)
{
document.getElementById(Men).style.visibility="hidden";
}
else if(document.all && !document.getElementById)
{
document.all[Men].style.visibility="hidden";
}
}
//-->
</script>
ein Menüpunkt
Code:
<table width="677" height="20" border="0" cellpadding="0" cellspacing="0" class="menue2">
<tr align="center">
<td width="134" align="center" OnMouseOver="MenueAuf('Menue1')" OnMouseOut="MenueZu('Menue1')">Menue1</td>
</tr>
</table>
Unterpunkte zum ersten Menüpunkt:
Code:
<div id="Menue1" class="unter1" onMouseOver="MenueAuf('Menue1')" onMouseOut="MenueZu('Menue1')">
<table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<td id="tabelle1">Unterpunkt1</td>
</tr>
<tr>
<td id="tabelle2">Unterpunkt2</td>
</tr>
<tr>
<td id="tabelle2">Unterpunkt3</td>
</tr>
<tr>
<td id="tabelle2">Unterpunkt4</td>
</tr>
<tr>
<td id="tabelle2">Unterpunkt5</td>
</tr>
<tr>
<td id="tabelle2">Unterpunkt6</td>
</tr>
<tr>
<td id="tabelle2">Unterpunkt7</td>
</tr>
<tr>
<td id="tabelle2">Unterpunkt8</td>
</tr>
</table>
</div>
Code:
.unter1
{
font-family: "Times New Roman", Times, serif;
font-size: 12px;
color: #000000;
letter-spacing: 1px;
text-Align: left;
position:absolute;
left:40px;
top:136px;
width: 210px;
background-Color: white;
visibility: hidden;
cursor: pointer;
z-index:3;
}
http://www.jumpfield.de/stuff/screen.JPG
Kommentar