[JavaScript] Hilfe bei Klappmenü

[BillieJean]

Hallo liebe Community!

Ich bin momentan am Bauen einer Webseite. Für das Menü würde ich gerne ein dynamisches Aufklappmenü verwenden. Ich habe dazu auch schon ein fast passendes Script im I-net gefunden, jedoch bedürft es einigen Spezialanforderungen von mir, die ich selbst leider nicht hinbekomme. Deshalb wollte ich mal hier nachfragen, ob ihr mir vielleicht dabei helfen könntet das Ding meinen Bedürfnissen anzupassen.

Hier erstmal das Java-Script:

 <script type="text/javascript">

var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
		if(el.style.display != "block"){ //DynamicDrive.com change
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="submenu") //DynamicDrive.com change
				ar[i].style.display = "none";
			}
			el.style.display = "block";
                        menu_image = "{$style['imagefolder']}/menu_magazin_over.gif";
		}
	}
}

</script>

Und hier die Einbindung auf der Webseite:

 <div id="masterdiv">

    <div class="menutitle" onclick="SwitchMenu('sub1')"><img src="images/cat1_normal.gif" border="0"></div>
     <span class="submenu" id="sub1">
      <table cellpadding="0" cellspacing="0" border="0" style="width: 130px;">
       <tr><td align="left" style="width: 100%;"><a href="link1.php" class="menu">Link 1.1</a></td></tr>
       <tr><td align="left" style="width: 100%;"><a href="link2.php" class="menu">Link 1.2</a></td></tr>
       <tr><td align="left" style="width: 100%;"><a href="link3.php" class="menu">Link 1.3</a></td></tr>
       <tr><td align="left"><img src="images/cat1_bottom.gif" alt="" border="0" /></td></tr>
      </table>
     </span>
    </div>

    <div class="menutitle" onclick="SwitchMenu('sub2')"><img src="images/cat2_normal.gif" border="0"></div>
     <span class="submenu" id="sub2">
      <table cellpadding="0" cellspacing="0" border="0" style="width: 130px;">
       <tr><td align="left" style="width: 100%;"><a href="link4.php" class="menu">Link 2.1</a></td></tr>
       <tr><td align="left" style="width: 100%;"><a href="link5.php" class="menu">Link 2.2</a></td></tr>
       <tr><td align="left"><img src="images/cat1_bottom.gif" alt="" border="0" /></td></tr>
      </table>
     </span>
    </div>

</div>

Folgendes passiert momentan: Beim Klicken auf eine bestimmte Grafik (cat1_normal.gif, etc.) klappt sich das Menü auf wo dann die weiteren Links sind (Link 1.1, Link 1.2, etc.). Das funktioniert soweit auch ziemlich gut jedoch bräuchte ich noch folgende Erweiterungen:

- Beim Klicken auf die Aufklapp-Grafik soll sich diese dann ändern. Also bei zugeklappten Zustand soll die Grafik "cat1_normal.gif" sichtbar sein und bei aufgeklappten Zustand die Grafik "cat1_over.gif"
- Menü lässt sich momentan zwar aufklappen, aber nicht wieder zuklappen
- Man soll einstellen können, ob ein Menü standartmäßig auf- oder zugeklappt ist

Diese Sachen wären erstmal sehr wichtig. Ich würde mich sehr freuen und euch drum bitten, dass sich das mal jemand ansieht und mir weiterhelfen kann.

Vielen Dank schonmal im Vorraus!!!

LG,
BillieJean

[jmc]

<script type="text/javascript">

var block=0,submenu,i,image_nr,row,row2,x,y=0;

if (document.getElementById){
    document.write('<style type="text/css">\n');
    document.write('.submenu{display: none;}\n');
    document.write('</style>\n');

    function SwitchMenu(title,obj){

        image_nr = obj.substring(3);
        submenu = document.getElementById(obj);
        row = document.getElementById("masterdiv").getElementsByTagName("span");
        row2 = document.getElementById("masterdiv").getElementsByTagName("div");

        if(submenu.style.display == "block"){
                block = 1;
        }else{
                block = 0;
        }

        for(i=0; i<row.length; i++){
            if (row[i].className=="submenu"){
                row[i].style.display = "none";
            }
        }

        for(x=0; x<row2.length; x++){
            if (row2[x].className=="menutitle"){
                y += 1;
                image = document.createElement("img");
                image.src = "images/cat"+y+"_normal.gif";
                row2[x].replaceChild(image, row2[x].firstChild);
            }
        }
        y = 0;

        if(!block){
            submenu.style.display = "block";

            image = document.createElement("img");
            image.src = "images/cat"+image_nr+"_over.gif";
            title.replaceChild(image, title.firstChild);
        }
    }
}
</script>

<div id="masterdiv">

    <div class="menutitle" onclick="SwitchMenu(this,'sub1')"><img src="images/cat1_normal.gif" border="0" ></div>
    <div>
     <span class="submenu" id="sub1">
      <table cellpadding="0" cellspacing="0" border="0" style="width: 130px;">
       <tr><td align="left" style="width: 100%;"><a href="link1.php" class="menu">Link 1.1</a></td></tr>
       <tr><td align="left" style="width: 100%;"><a href="link2.php" class="menu">Link 1.2</a></td></tr>
       <tr><td align="left" style="width: 100%;"><a href="link3.php" class="menu">Link 1.3</a></td></tr>
       <tr><td align="left"><img src="images/cat1_bottom.gif" alt="" border="0" /></td></tr>
      </table>
     </span>
    </div>

    <div class="menutitle" onclick="SwitchMenu(this,'sub2')"><img src="images/cat2_normal.gif" border="0"></div>
    <div>
     <span class="submenu" id="sub2">
      <table cellpadding="0" cellspacing="0" border="0" style="width: 130px;">
       <tr><td align="left" style="width: 100%;"><a href="link4.php" class="menu">Link 2.1</a></td></tr>
       <tr><td align="left" style="width: 100%;"><a href="link5.php" class="menu">Link 2.2</a></td></tr>
       <tr><td align="left"><img src="images/cat1_bottom.gif" alt="" border="0" /></td></tr>
      </table>
     </span>
    </div>

</div> 

sollte funktionieren

[BillieJean]

Erstmal danke für die schnelle Antwort...aber leider funktioniert es nicht bzw. das Aufklappen funktioniert nicht mehr...

LG,
Daniel

[jmc]

Welchen Browser benutzt du?

Ich habe die angehängte Datei mit IE und FF ausprobiert und es funktioniert.

Was genau Funktioniert denn beim Aufklappen nicht mehr?

[BillieJean]

Ich benütze Mozilla Firefox...

Hmm, komisch...wenn ich auf die Grafik klicke tut sich nichts...also es bleibt alles wie gehabt in zugeklappten Zustand

[jmc]

Hast du wirklich die Datei die ich hochgeladen habe geöffnet und dann als menu.html abgespeichert und dann wieder geöffnet?

So sieht es dann aus nach aufklappen des ersten Bildes: Siehe Anhang

[BillieJean]

Hmm, komisch. Naja, ich werde es heut Nachmittag wenn ich von der Arbeit zuhause nochmal probieren und schauen ob ich nicht irgendwas falsch gemacht habe...

Danke erstmal, ich melde mich dann wieder.

[BillieJean]

Hi!

Habs jetzt nochmal ausprobiert und gesehen dass ich einiges vergessen hatte zu ändern, usw.

Funktioniert einwandfrei! Super vielen Dank!

Ich denke den Rest sollte ich dann selbst hinbekommen...danke nochmals

LG,
BillieJean

[BillieJean]

Hallo!

Hätte da noch eine Frage.

Und zwar: Wie ist es denn möglich, dass sich mehrere Menüs gleichzeitig aufklappen lassen?

Also momentan isses ja so, dass wenn man ein Menü aufgeklappt hat, und dann ein anderes aufklappt, sich das vorherige wieder zu klappt. Was ich nun bräuchte wäre, dass sich die anderen Menüs nicht zuklappen wenn ich ein neues öffne. Also dass es möglich ist, dass mehrere Menüs gleichzeitig aufgeklappt sind.

Wäre dir sehr dankbar wenn du mir da noch weiterhelfen könntest!

LG,
BillieJean

[jmc]

hihi, also willst du das mit dem zuklappen ausschalten?

Wenn du mir das am Anfang gesagt hättest, hätte ich dir den Code geich geben können, es wäre ca 1/4 des Aufwandes gewesen den ich für das andere Menu benötigt hatte.

<script type="text/javascript">

var block=0,submenu,image_nr;

if(document.getElementById){
	document.write('<style type="text/css">\n');
	document.write('.submenu{display: none;}\n');
	document.write('</style>\n');
}
function SwitchMenu(title,obj){
	if(document.getElementById){
		image_nr = obj.substring(3);
		submenu = document.getElementById(obj);

		if(submenu.style.display == "block"){
			block = 1;
		}else{
			block = 0;
		}

		if(!block){
			submenu.style.display = "block";

			image = document.createElement("img");
			image.src = "images/cat"+image_nr+"_over.gif";
			title.replaceChild(image, title.firstChild);
		}else{
			submenu.style.display = "none";

			image = document.createElement("img");
			image.src = "images/cat"+image_nr+"_normal.gif";
			title.replaceChild(image, title.firstChild);
		}
	}
}
</script>

<div>

    <div class="menutitle" onclick="SwitchMenu(this,'sub1')"><img src="images/cat1_normal.gif" border="0" ></div>
    <div>
     <span class="submenu" id="sub1">
      <table cellpadding="0" cellspacing="0" border="0" style="width: 130px;">
       <tr><td align="left" style="width: 100%;"><a href="link1.php" class="menu">Link 1.1</a></td></tr>
       <tr><td align="left" style="width: 100%;"><a href="link2.php" class="menu">Link 1.2</a></td></tr>
       <tr><td align="left" style="width: 100%;"><a href="link3.php" class="menu">Link 1.3</a></td></tr>
       <tr><td align="left"><img src="images/cat1_bottom.gif" alt="" border="0" /></td></tr>
      </table>
     </span>
    </div>

    <div class="menutitle" onclick="SwitchMenu(this,'sub2')"><img src="images/cat2_normal.gif" border="0"></div>
    <div>
     <span class="submenu" id="sub2">
      <table cellpadding="0" cellspacing="0" border="0" style="width: 130px;">
       <tr><td align="left" style="width: 100%;"><a href="link4.php" class="menu">Link 2.1</a></td></tr>
       <tr><td align="left" style="width: 100%;"><a href="link5.php" class="menu">Link 2.2</a></td></tr>
       <tr><td align="left"><img src="images/cat1_bottom.gif" alt="" border="0" /></td></tr>
      </table>
     </span>
    </div>

</div>

[BillieJean]

Vielen Dank