tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
4
ZUGRIFFE
1820
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 03.11.04 17:29 #1
    Avatar von Blattspinat
    Blattspinat Blattspinat ist offline Mitglied Gold
    Registriert seit
    Jan 2003
    Ort
    Frankfurt am Main
    Beiträge
    141
    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-Code:
    <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
     
    Zitieren Zitieren
  2. 04.11.04 11:18 #2
    HUBBLE HUBBLE ist offline Mitglied Silber
    Registriert seit
    Oct 2004
    Beiträge
    68
    Versuch mal in den Zeilen:


    <td onmouseover=menu(1),setOff() ; onmouseout=setOn(); style="cursorointer"><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.
     
    Zitieren Zitieren
  3. 04.11.04 19:14 #3
    Avatar von Blattspinat
    Blattspinat Blattspinat ist offline Mitglied Gold
    Registriert seit
    Jan 2003
    Ort
    Frankfurt am Main
    Beiträge
    141
    funktioniert so, also wenn ich die id jeweils eins runter setze gar nicht mehr. hmm...
     
    Zitieren Zitieren
  4. 04.11.04 20:26 #4
    Avatar von hela
    hela hela ist gerade online Mitglied Smaragd
    tutorials.de Premium-User
    Registriert seit
    Oct 2004
    Beiträge
    1.123
    Hallo Blattspinat,
    im Script wird das Array "layers" erstellt und die Zählung von Array-Elementen beginnt immer bei 0.
    Also:
    Code :
    1
2
3
4
5
6
7
8
9
10

    ...
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';
...
     
    Zitieren Zitieren
  5. 05.11.04 09:42 #5
    Avatar von Blattspinat
    Blattspinat Blattspinat ist offline Mitglied Gold
    Registriert seit
    Jan 2003
    Ort
    Frankfurt am Main
    Beiträge
    141
    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
     
    Zitieren Zitieren
« Wysiwyg | Popupmenü über DropDownList ? »

Ähnliche Themen

  1. Dropdown Menü
    Von Crazynet im Forum PHP
    Antworten: 1
    Letzter Beitrag: 16.10.10, 20:40
  2. CSS DropDown Menü
    Von Hans0001 im Forum CSS
    Antworten: 16
    Letzter Beitrag: 16.07.10, 16:46
  3. Menü wie dropdown nur bei senkrechtem Menü
    Von Merbi im Forum CSS
    Antworten: 3
    Letzter Beitrag: 20.07.07, 00:04
  4. dropdown-Menü
    Von mediaroad im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 16.04.07, 11:55
  5. JPG im Dropdown Menü
    Von DoRiMaN im Forum HTML & XHTML
    Antworten: 2
    Letzter Beitrag: 05.06.04, 12:24