Javascript-dropdown-menu

**pogo** · 28.11.2004 18:28

Vor einiger zeit gab es hier im forum mal einen thread wo irgendjemand (ich weiß nicht mehr wer's war) diesen code für ein dropdown-menu gepostet hat. Ich hab den thread nicht mehr gefunden, der ist wahrscheinlich beim servercrash verloren gegangen. Aber nun zum thema: Ich wollte das script von 2 auf 3 main-menus erweitern. Das problem ist nun, das sich das dritte menu nicht mehr schliesst, wenn die maus "runter geht". Kann mir da vielleicht jemand helfen? Hier mal das javascript:

Code:

<script language="JavaScript" type="text/javascript">
<!--
var anzahl = new Array();
anzahl[1] = 21;
anzahl[2] = 21;
anzahl[3] = 21;
anzahl[4] = 21;
anzahl[5] = 21;
anzahl[6] = 21;
anzahl[7] = 21;
anzahl[8] = 21;
anzahl[9] = 21;
anzahl[10] = 21;
anzahl[11] = 21;
anzahl[12] = 21;
anzahl[13] = 21;
anzahl[14] = 21;
anzahl[15] = 21;
anzahl[16] = 21;
anzahl[17] = 21;
anzahl[18] = 21;
anzahl[19] = 21;
anzahl[20] = 21;
anzahl[21] = 21;
var inmenue = new Array();
inmenue[1] = false;
inmenue[2] = false;
inmenue[3] = false;

function menuout() {
  for(var i in anzahl) {
    closemenu(i, anzahl[i])
  }
}
function mainmenuout(nummer) {
  document.getElementById("mainmenu"+nummer).style.color="#00FF00";
  if(inmenue[nummer] == true) {
    document.getElementById("mainmenu"+nummer).style.color="#FFFF00";
  } else {
    closemenu(nummer, anzahl[nummer])
  }
}
function mainmenuover(nummer) {
  document.getElementById("mainmenu"+nummer).style.color="#FFFF00";
}
function mainmenuclick(nummer) {
  openmenu(nummer, anzahl[nummer])
}
function submenuover(nummer,nummerb) {
  document.getElementById("mainmenu"+nummer).style.color="#FFFF00";
  document.getElementById("submenu"+nummer+"_"+nummerb).style.color="#FFFF00";
  inmenue[nummer] = true;
  openmenu(nummer, anzahl[nummerb]);
}
function submenuout(nummer,nummerb) {
  document.getElementById("mainmenu"+nummer).style.color="#00FF00";
  document.getElementById("submenu"+nummer+"_"+nummerb).style.color="#00FF00";
}
function submenuclick(nummer,nummerb) {

}
function closemenu(nummer, nummerb) {
  inmenue[nummer] = false;
  for(i=1; i <= nummerb; i++) {
    document.getElementById("submenu"+nummer+"_"+i).style.visibility="hidden";
  }
}
function openmenu(nummer, nummerb) {
  for(i=1; i <= nummerb; i++) {
    document.getElementById("submenu"+nummer+"_"+i).style.visibility="visible";
  }
}
function load() {
  for(i=1; i <= anzahl.lengh; i++) {
    variable = i + 1;
    temp = document.getElementById("mainmenu"+i).style.left + 50;
    alert(temp);
    document.getElementById("mainmenu"+variable).style.left=temp;
  }
}
//-->
</script>
<noscript></noscript>

Dann der HTML-teil dazu:

HTML-Code:

<div onmouseout="menuout();" style="position: relative; left: 0px; top: 0px;">
<div class="mainunaktiv" id="mainmenu1" style="left: 200px; top: 0px;" onmouseover="mainmenuover(1);" onmouseout="mainmenuout(1);" onclick="mainmenuclick(1)">1Main</div>
<div class="mainunaktiv" id="mainmenu2" style="left: 350px; top: 0px;" onmouseover="mainmenuover(2);" onmouseout="mainmenuout(2);" onclick="mainmenuclick(2)">2Main</div>
<div class="mainunaktiv" id="mainmenu3" style="left: 500px; top: 0px;" onmouseover="mainmenuover(3);" onmouseout="mainmenuout(3);" onclick="mainmenuclick(3)">3Main</div>

<div class="subunaktiv" style="left: 200px; top: 15px;" id="submenu1_1" onmouseover="submenuover(1,1)" onmouseout="submenuout(1,1);" onclick="submenuclick(1,1)">blub</div>
<div class="subunaktiv" style="left: 200px; top: 35px;" id="submenu1_2" onmouseover="submenuover(1,2)" onmouseout="submenuout(1,2);" onclick="submenuclick(1,2)">blub</div>
<div class="subunaktiv" style="left: 200px; top: 55px;" id="submenu1_3" onmouseover="submenuover(1,3)" onmouseout="submenuout(1,3);" onclick="submenuclick(1,3)">blub</div>
<div class="subunaktiv" style="left: 200px; top: 75px;" id="submenu1_4" onmouseover="submenuover(1,4)" onmouseout="submenuout(1,4);" onclick="submenuclick(1,4)">blub</div>
<div class="subunaktiv" style="left: 200px; top: 95px;" id="submenu1_5" onmouseover="submenuover(1,5)" onmouseout="submenuout(1,5);" onclick="submenuclick(1,5)">blub</div>
<div class="subunaktiv" style="left: 200px; top: 115px;" id="submenu1_6" onmouseover="submenuover(1,6)" onmouseout="submenuout(1,6);" onclick="submenuclick(1,6)">blub</div>
<div class="subunaktiv" style="left: 200px; top: 135px;" id="submenu1_7" onmouseover="submenuover(1,7)" onmouseout="submenuout(1,7);" onclick="submenuclick(1,7)">blub</div>
<div class="subunaktiv" style="left: 200px; top: 155px;" id="submenu1_8" onmouseover="submenuover(1,8)" onmouseout="submenuout(1,8);" onclick="submenuclick(1,8)">blub</div>
<div class="subunaktiv" style="left: 200px; top: 175px;" id="submenu1_9" onmouseover="submenuover(1,9)" onmouseout="submenuout(1,9);" onclick="submenuclick(1,9)">blub</div>
<div class="subunaktiv" style="left: 200px; top: 195px;" id="submenu1_10" onmouseover="submenuover(1,10)" onmouseout="submenuout(1,10);" onclick="submenuclick(1,10)">blub</div>
<div class="subunaktiv" style="left: 200px; top: 215px;" id="submenu1_11" onmouseover="submenuover(1,11)" onmouseout="submenuout(1,11);" onclick="submenuclick(1,11)">blub</div>
<div class="subunaktiv" style="left: 200px; top: 235px;" id="submenu1_12" onmouseover="submenuover(1,12)" onmouseout="submenuout(1,12);" onclick="submenuclick(1,12)">blub</div>
<div class="subunaktiv" style="left: 200px; top: 255px;" id="submenu1_13" onmouseover="submenuover(1,13)" onmouseout="submenuout(1,13);" onclick="submenuclick(1,13)">blub</div>
<div class="subunaktiv" style="left: 200px; top: 275px;" id="submenu1_14" onmouseover="submenuover(1,14)" onmouseout="submenuout(1,14);" onclick="submenuclick(1,14)">blub</div>
<div class="subunaktiv" style="left: 200px; top: 295px;" id="submenu1_15" onmouseover="submenuover(1,15)" onmouseout="submenuout(1,15);" onclick="submenuclick(1,15)">blub</div>
<div class="subunaktiv" style="left: 200px; top: 315px;" id="submenu1_16" onmouseover="submenuover(1,16)" onmouseout="submenuout(1,16);" onclick="submenuclick(1,16)">blub</div>
<div class="subunaktiv" style="left: 200px; top: 335px;" id="submenu1_17" onmouseover="submenuover(1,17)" onmouseout="submenuout(1,17);" onclick="submenuclick(1,17)">blub</div>
<div class="subunaktiv" style="left: 200px; top: 355px;" id="submenu1_18" onmouseover="submenuover(1,18)" onmouseout="submenuout(1,18);" onclick="submenuclick(1,18)">blub</div>
<div class="subunaktiv" style="left: 200px; top: 375px;" id="submenu1_19" onmouseover="submenuover(1,19)" onmouseout="submenuout(1,19);" onclick="submenuclick(1,19)">blub</div>
<div class="subunaktiv" style="left: 200px; top: 395px;" id="submenu1_20" onmouseover="submenuover(1,20)" onmouseout="submenuout(1,20);" onclick="submenuclick(1,20)">blub</div>
<div class="subunaktiv" style="left: 200px; top: 415px;" id="submenu1_21" onmouseover="submenuover(1,21)" onmouseout="submenuout(1,21);" onclick="submenuclick(1,21)">blub</div>

<div class="subunaktiv" style="left: 350px; top: 15px;" id="submenu2_1" onmouseover="submenuover(2,1)" onmouseout="submenuout(2,1);" onclick="submenuclick(2,1)">blub</div>
<div class="subunaktiv" style="left: 350px; top: 35px;" id="submenu2_2" onmouseover="submenuover(2,2)" onmouseout="submenuout(2,2);" onclick="submenuclick(2,2)">blub</div>
<div class="subunaktiv" style="left: 350px; top: 55px;" id="submenu2_3" onmouseover="submenuover(2,3)" onmouseout="submenuout(2,3);" onclick="submenuclick(2,3)">blub</div>
<div class="subunaktiv" style="left: 350px; top: 75px;" id="submenu2_4" onmouseover="submenuover(2,4)" onmouseout="submenuout(2,4);" onclick="submenuclick(2,4)">blub</div>
<div class="subunaktiv" style="left: 350px; top: 95px;" id="submenu2_5" onmouseover="submenuover(2,5)" onmouseout="submenuout(2,5);" onclick="submenuclick(2,5)">blub</div>

<div class="subunaktiv" style="left: 500px; top: 15px;" id="submenu3_1" onmouseover="submenuover(3,1)" onmouseout="submenuout(3,1);" onclick="submenuclick(3,1)">blub</div>
<div class="subunaktiv" style="left: 500px; top: 35px;" id="submenu3_2" onmouseover="submenuover(3,2)" onmouseout="submenuout(3,2);" onclick="submenuclick(3,2)">blub</div>
<div class="subunaktiv" style="left: 500px; top: 55px;" id="submenu3_3" onmouseover="submenuover(3,3)" onmouseout="submenuout(3,3);" onclick="submenuclick(3,3)">blub</div>
<div class="subunaktiv" style="left: 500px; top: 75px;" id="submenu3_4" onmouseover="submenuover(3,4)" onmouseout="submenuout(3,4);" onclick="submenuclick(3,4)">blub</div>
<div class="subunaktiv" style="left: 500px; top: 95px;" id="submenu3_5" onmouseover="submenuover(3,5)" onmouseout="submenuout(3,5);" onclick="submenuclick(3,5)">blub</div>
<div class="subunaktiv" style="left: 500px; top: 115px;" id="submenu3_6" onmouseover="submenuover(3,6)" onmouseout="submenuout(3,6);" onclick="submenuclick(3,6)">blub</div>
<div class="subunaktiv" style="left: 500px; top: 135px;" id="submenu3_7" onmouseover="submenuover(3,7)" onmouseout="submenuout(3,7);" onclick="submenuclick(3,7)">blub</div>
<div class="subunaktiv" style="left: 500px; top: 155px;" id="submenu3_8" onmouseover="submenuover(3,8)" onmouseout="submenuout(3,8);" onclick="submenuclick(3,8)">blub</div>
<div class="subunaktiv" style="left: 500px; top: 175px;" id="submenu3_9" onmouseover="submenuover(3,9)" onmouseout="submenuout(3,9);" onclick="submenuclick(3,9)">blub</div>
<div class="subunaktiv" style="left: 500px; top: 195px;" id="submenu3_10" onmouseover="submenuover(3,10)" onmouseout="submenuout(3,10);" onclick="submenuclick(3,10)">blub</div>
<div class="subunaktiv" style="left: 500px; top: 215px;" id="submenu3_11" onmouseover="submenuover(3,11)" onmouseout="submenuout(3,11);" onclick="submenuclick(3,11)">blub</div>
</div>

Und die CSS-formatierungen:

Code:

div.subunaktiv { 
background-color: #000000; 
background-image: url(images/header_menu_verlauf.gif); 
background-repeat: repeat-y; 
border: 1px solid #000000; 
cursor: hand; 
visibility: hidden; 
width: 200px; 
height: 20px; 
text-align: left; 
font-weight: bold; 
color: #00FF00; 
font-size: 10pt; 
position: absolute; 
filter:Alpha(opacity=75, finishopacity=75, style=1); 
}

div.mainunaktiv { 
color: #00FF00; 
font-size: 10pt; 
font-weight: bold; 
cursor: hand; 
text-align: center; 
position: absolute; 
}

**Manni** · 28.11.2004 19:11

Nunja, ich war der Poster dieses Scripts

*hust*
In dem anzahl[] Array legst du die Anzahl der Untermenüpunkte fest.
Das wären beim erste 21, beim zweiten 5 und beim dritten 11. Ich weiß allerdings nicht, ob das der Fehler ist...

Manni

**pogo** · 28.11.2004 20:02

Ne, soweit ich das ausprobiert habe, legt das anzahl-array nicht die untermenupunkte für die mainmenupunkte fest (also so wie du's gesagt hast) sondern die angezeigten untermenupunkte für den untermenupunkte auf dem man sich gerade befindet.
Also mal ein beispiel, denn ich glaub man versteht das, was ich grad geschrieben hab, nicht:
Wenn man sich (mit dem mauszeiger) auf dem 3. untermenupunkt befindet werden x untermenupunkte angezeigt, wenn man sich auf dem 5. untermenupunkt befindet werden y untermenupunkte angezeigt. Der code dazu wäre:

Code:

anzahl[3] = x;
anzahl5] = y;

So, also hat das nix damit zu tun

Edit: Hab's grad nochmal so gemacht wie du gesagt hast, also

Code:

anzahl[1] = 21;
anzahl[2] = 5;
anzahl[3] = 11;

Dann verhält es sich so wie ich's geschrieben hab, jedoch wird nun auch das dritte menu geschlossen. Eine lösung ist das ja aber nicht, da sobald ich bei dem dritten punkt angelangt bin, die hälfte des menus fehlt und beim vierten punkt sogar das ganze menu geschlossen wird

Thema: Javascript-dropdown-menu

Themen-Optionen

Anzeige

Hybrid-Darstellung

Javascript-dropdown-menu

Berechtigungen