Dropdown Menü zeigt falsches Menü

Blattspinat

Blattspinat

Erfahrenes Mitglied
Nabend Leute.
Also ich bin eigentlich ein Javascript Laie, kann also kaum JS. Ich wollte ein Dropdownmenü realisieren, was auch eigentlich funktionieren würde. Nur wenn ich auf einen Link mit dem Mauszeiger komme, dann zeigt er nicht das Downmenü an was dazu gehört, sondern eins nebendran. wisst ihr was ich meine?

Hier ist mal der Code (Achtung, ist ne ganze Menge, aber ich denke, dass da irgendwo ein doofer kleiner fehler ist):

HTML: 
<html>
<head>
<title>
Dropdown
</title>
<script language="JavaScript">
 
 function clean ()
 {
 if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt (0)<'5'))
 {
 window.document.m1.visibility="hide";
 window.document.m2.visibility="hide";
 window.document.m3.visibility="hide";
 window.document.m4.visibility="hide";
 window.document.m5.visibility="hide";
 return;
 }
 if (navigator.appVersion.charAt (0)<'5')
 {
 var layers=document.all.tags ("div");
 }
 else {
 var layers=document.getElementsByTagName("div");
 }
 
 layers[1].style.visibility='hidden';
 layers[2].style.visibility='hidden';
 layers[3].style.visibility='hidden';
 layers[4].style.visibility='hidden';
 layers[5].style.visibility='hidden';
	 
 return;
 }
 
 function menu (i)
 {
 switch(i)
 {
 //MENU 1
 case 1:{
 if (navigator.appVersion.charAt (0)<'5') var layers=document.all.tags ("div");
 else var layers=document.getElementsByTagName("div");
 
 layers[1].style.visibility='visible';
 layers[2].style.visibility='hidden';
 layers[3].style.visibility='hidden';
 layers[4].style.visibility='hidden';
 layers[5].style.visibility='hidden';
	 
 return;
 }
 //MENU 2
 case 2:{
 if (navigator.appVersion.charAt (0)<'5') var layers=document.all.tags ("div");
 else var layers=document.getElementsByTagName("div");
 
 layers[1].style.visibility='hidden';
 layers[2].style.visibility='visible';
 layers[3].style.visibility='hidden';
 layers[4].style.visibility='hidden';
 layers[5].style.visibility='hidden';
	 
 return;
 }
 //MENU 3
 case 3:{
 if (navigator.appVersion.charAt (0)<'5') var layers=document.all.tags ("div");
 else var layers=document.getElementsByTagName("div");
 
 layers[1].style.visibility='hidden';
 layers[2].style.visibility='hidden';
 layers[3].style.visibility='visible';
 layers[4].style.visibility='hidden';
 layers[5].style.visibility='hidden';
	 
 return;
 }
 //MENU 4
 case 4:{
 if (navigator.appVersion.charAt (0)<'5') var layers=document.all.tags ("div");
 else var layers=document.getElementsByTagName("div");
 
 layers[1].style.visibility='hidden';
 layers[2].style.visibility='hidden';
 layers[3].style.visibility='hidden';
 layers[4].style.visibility='visible';
 layers[5].style.visibility='hidden';
	 
 return;
 }
 //MENU 5
 case 5:{
 if (navigator.appVersion.charAt (0)<'5') var layers=document.all.tags ("div");
 else var layers=document.getElementsByTagName("div");
 
 layers[1].style.visibility='hidden';
 layers[2].style.visibility='hidden';
 layers[3].style.visibility='hidden';
 layers[4].style.visibility='hidden';
 layers[5].style.visibility='visible';
	 
 return;
 }
 }
 }
 
 
 function setOn(){
 ref=setTimeout("clean()",1000);
 }
 
 function setOff(){
 clearTimeout(ref);
 }
 </script>

</head><body>
<div style="visibility: hidden" id="m1" style="position:absolute; left:187px; top:196px; width:110px; height:121px; z-index:1"> 
  <p>Link1<br>Link2<br>Link3</p>
</div>
<div style="visibility: hidden" id="m2" style="position:absolute; left:367px; top:196px; width:110px; height:121px; z-index:1"> 
  <p>Link1<br>Link2<br>Link3</p>
</div>
<div style="visibility: hidden" id="m3" style="position:absolute; left:546px; top:196px; width:110px; height:121px; z-index:1"> 
  <p>Link1<br>Link2<br>Link3</p>
</div>
<div style="visibility: hidden" id="m4" style="position:absolute; left:725px; top:196px; width:110px; height:121px; z-index:1"> 
  <p>Link1<br>Link2<br>Link3</p>
</div>
<div style="visibility: hidden" id="m5" style="position:absolute; left:904px; top:196px; width:110px; height:121px; z-index:1"> 
  <p>Link1<br>Link2<br>Link3</p>
</div>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td><div align="center">Normal</div></td>
    <td onmouseover=menu(1),setOff() ; onmouseout=setOn(); style="cursor:pointer"><div align="center">Dropdown 
        m1 </div></td>
    <td onmouseover=menu(2),setOff() ; onmouseout=setOn(); style="cursor:pointer"><div align="center">Dropdown 
        m2</div></td>
    <td onmouseover=menu(3),setOff() ; onmouseout=setOn(); style="cursor:pointer"><div align="center">Dropdown 
        m3</div></td>
    <td onmouseover=menu(4),setOff() ; onmouseout=setOn(); style="cursor:pointer"><div align="center">Dropdown 
        m4</div></td>
    <td onmouseover=menu(5),setOff() ; onmouseout=setOn(); style="cursor:pointer"><div align="center">Dropdown 
        m5</div></td>
    <td><div align="center">Normal</div></td>
  </tr>
</table>

</body>
</html>

Help me plz :) Danke schonmal
 
Versuch mal in den Zeilen:


<td onmouseover=menu(1),setOff() ; onmouseout=setOn(); style="cursor:pointer"><div align="center">Dropdown
m1 </div></td>

im MOuseover an die FUnktion menu jeweils die nächt kleinere Zahl zu übergeben. In diesem Beispiel also menu(0) usw.
 
Hallo Blattspinat,
im Script wird das Array "layers" erstellt und die Zählung von Array-Elementen beginnt immer bei 0.
Also:
Code: 
...
var layers=document.getElementsByTagName("div");
...
 
layers[0].style.visibility='hidden';
layers[1].style.visibility='hidden';
layers[2].style.visibility='hidden';
layers[3].style.visibility='hidden';
layers[4].style.visibility='hidden';
...
 
ok danke so es optimal ... es gibt nur noch ein kleines problem, und zwar: wenn ich mit der Maus von dem eigentlichen link auf den Layer wechsel, (um einen Unterlink auszuwählen) dann schließt es sich einfach nach einiger Zeit wieder. Ich will aber, dass der Layer so lange da bleibt, wie ich mit der maus drauf bin, und sobald ich mit der maus unten bin soll er noch einige Zeit da bleiben, dann aber verschwinden. Aber ich bin jetzt auch erstmal froh das es überhaupt so :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück