-
Javascript-dropdown-menu
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;
}
-
Nunja, ich war der Poster dieses Scripts :D *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
-
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 :D
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 :rolleyes:
