Hilfe bei JavaScript-Klappmenü

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Hilfe bei JavaScript-Klappmenü

    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:

    Quellcode

    1. var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
    2. var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only
    4. if (document.getElementById){ //DynamicDrive.com change
    5. document.write('<style type="text/css">\n')
    6. document.write('.submenu{display: none;}\n')
    7. document.write('</style>\n')
    8. }
    10. function SwitchMenu(obj){
    11. if(document.getElementById){
    12. var el = document.getElementById(obj);
    13. var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
    14. if(el.style.display != "block"){ //DynamicDrive.com change
    15. for (var i=0; i<ar.length; i++){
    16. if (ar[i].className=="submenu") //DynamicDrive.com change
    17. ar[i].style.display = "none";
    18. }
    19. el.style.display = "block";
    20. menu_image = "{$style['imagefolder']}/menu_magazin_over.gif";
    21. }
    22. }
    23. }
    Alles anzeigen


    Und hier die Einbindung auf der Webseite:

    Quellcode

    1. <div id="masterdiv">
    3. <div class="menutitle" onclick="SwitchMenu('sub1')"><img src="images/cat1_normal.gif" border="0"></div>
    4. <span class="submenu" id="sub1">
    5. <table cellpadding="0" cellspacing="0" border="0" style="width: 130px;">
    6. <tr><td align="left" style="width: 100%;"><a href="link1.php" class="menu">Link 1.1</a></td></tr>
    7. <tr><td align="left" style="width: 100%;"><a href="link2.php" class="menu">Link 1.2</a></td></tr>
    8. <tr><td align="left" style="width: 100%;"><a href="link3.php" class="menu">Link 1.3</a></td></tr>
    9. <tr><td align="left"><img src="images/cat1_bottom.gif" alt="" border="0" /></td></tr>
    10. </table>
    11. </span>
    12. </div>
    14. <div class="menutitle" onclick="SwitchMenu('sub2')"><img src="images/cat2_normal.gif" border="0"></div>
    15. <span class="submenu" id="sub2">
    16. <table cellpadding="0" cellspacing="0" border="0" style="width: 130px;">
    17. <tr><td align="left" style="width: 100%;"><a href="link4.php" class="menu">Link 2.1</a></td></tr>
    18. <tr><td align="left" style="width: 100%;"><a href="link5.php" class="menu">Link 2.2</a></td></tr>
    19. <tr><td align="left"><img src="images/cat1_bottom.gif" alt="" border="0" /></td></tr>
    20. </table>
    21. </span>
    22. </div>
    24. </div>
    Alles anzeigen


    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

  • Hi,

    das onClick Event ist ja bereits vorhanden.
    mit objekt.src lässt sich der pfad des bildes ändern

    z.B.

    Quellcode

    1. <script type="text/javascript"><!--
    2. function wechsel() {
    3. document.getElementById('bild5').src="images/cat1_neu.gif";
    4. }
    5. //--></script>
    7. <img src="images/cat1_normal.gif" border="0" id="bild5" onClick="wechsel()">


    dass das untermenü beim laden sichtbar wird, erreichst du damit:

    Quellcode

    1. <span class="submenu" id="sub1" style="display:block">

  • Hallo und erstmal danke für die schnelle Antwort! :)

    Dass ich das Bild beim Aufklappen ändert, funktioniert soweit eigentlich super. Nur habe ich trotzdem noch ein paar Probleme...

    - Wenn ich das Menü zuklappe, ändert sich das Bild nicht wieder zurück (also das cat_neu.gif bleibt und wird nicht wieder zum cat1_normal.gif)
    - In der Funktion "wechsel" habe ich nun die neuen Grafiken für alle Menüpunkte definiert. Klappe ich jedoch zB sub1 auf, ändern sich die Billder bei allen sub's zum aufgeklappten Zustand, obwohl sie noch zugeklappt sind
    - Das Auf- und Zuklappen funktioniert eigentlich überall richtig nur bei der ersten sub nicht so ganz. Also während ein sub aufgeklappt ist lässt sich auch ein anderes aufklappen, ohne dass sich das vorher aufgeklappte schließt. So will ich das auch und es funktioniert eigentlich auch bei jedem sub außer beim ersten. Das klappt sich immer wieder zu wenn ich danach ein anderes sub aufklappe...

    Wenn du mir da nochmal helfen könntest wäre ich dir sehr sehr dankbar!!

    Vielen Dank schonmal...

    LG,
    Daniel

  • ist das denn dein ganzer code?
    was passiert denn mit menu_image?

    also bei klick werden alle spans in der masterdiv ausgeblendet.. und danach wird das ausgewählte span wieder sichtbar
    innerhalb der for schleife musst du also auch die bilder zurücksetzen
    eine bildwechsel funktion gibts aber bestimmt schon, sonst würde es beim onClick nicht getauscht werden

  • Dieses menu_image war falsch hatte ich vergessen rauszulöschen...hier einfach mal mein aktueller JS-Code:

    Quellcode

    1. <script type="text/javascript">
    3. var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
    4. var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only
    6. if (document.getElementById){
    7. document.write('<style type="text/css">\n')
    8. document.write('.submenu{display: none;}\n')
    9. document.write('</style>\n')
    10. }
    12. function SwitchMenu(obj){
    13. if(document.getElementById){
    14. var el = document.getElementById(obj);
    15. var ar = document.getElementById("masterdiv").getElementsByTagName("span");
    16. if(el.style.display != "block"){ //DynamicDrive.com change
    17. for (var i=0; i<ar.length; i++){
    18. if (ar[i].className=="submenu") //DynamicDrive.com change
    19. ar[i].style.display = "none";
    20. }
    21. el.style.display = "block";
    22. }else{
    23. el.style.display = "none";
    24. }
    25. }
    26. }
    28. function wechsel() {
    29. document.getElementById('bild1').src="{$style['imagefolder']}/menu_magazin_over.gif";
    30. document.getElementById('bild2').src="{$style['imagefolder']}/menu_community_over.gif";
    31. document.getElementById('bild3').src="{$style['imagefolder']}/menu_extras_over.gif";
    32. document.getElementById('bild4').src="{$style['imagefolder']}/menu_interaktiv_over.gif";
    33. }
    35. </script>
    Alles anzeigen

  • super einrückungen ;)
    mir ist gerade aufgefallen, dass die DIVs mit der Klasse "menutitle" falsch geschlossen werden

    hier eine neue SwitchMenu()

    Quellcode

    1. function SwitchMenu(id){
    2. if(document.getElementById){
    3. var ar = document.getElementsByTagName("div");
    4. var counter = 0;
    6. //verstecke alle untermenues und setze die bilder zurueck
    7. for(var i=0; i<ar.length; i++) {
    8. if(ar[i].className == "menutitle") {
    9. ++counter;
    10. var span = ar[i].getElementsByTagName("span")[0];
    11. var img = ar[i].getElementsByTagName("img")[0];
    12. if(span.id == id) {
    13. span.style.display = "block";
    14. img.src = "images/cat"+ counter +"_normal.gif";
    16. } else {
    17. span.style.display = "none";
    18. img.src = "images/cat"+ counter +"_overal.gif";
    19. }
    20. }
    21. }
    22. }
    23. }
    Alles anzeigen

  • Hallo und schonmal danke für deine Bemühungen.

    Bin gerade in der Arbeit und kann es deshalb leider erst am Nachmittag ausprobieren.

    Aber ein paar Fragen dazu jetzt schonmal:

    - Bleibt die Funktion wechsel() wie gehabt bzw brauche ich die noch?
    - Und muss ich auf Grund der neuen Funktion im HTML-Code auch etwas ändern oder kann das so bleiben?

    LG,
    BillieJean