Klappmenü mit CSS

  • CSS

Es gibt 3 Antworten in diesem Thema. Der letzte Beitrag () ist von Fritschifisch.

    Klappmenü mit CSS

    Hallo!

    Derzeit arbeite ich mit Javascript um Menüs auf- und zuzuklappen. Das soll, so wurde mir gesagt, auch mit CSS möglich sein. Nur finde ich nicht das Richtige im Netz. Bei allem was man findet klappt das Menü auf wenn man mit der Maus draufzeigt und klappt wieder zu wenn man es wieder verlässt. Bei mir soll/muss es aber offen bleiben, und schließen wenn man einen anderen Menüpunkt klickt.

    Das ist mein bisheriger Menücode. ZUm AUf- und Zuklappen kommt "SwitchMenu" von "Dynamic Drive" (dynamicdrive.com/) zum Einsatz.

    HTML-Quellcode

    1. <div id="masterdiv">
    3. <div class="menutitle" onclick="SwitchMenu('sub1')"><a href="javascript:HideStart('startx');">Home</a></div>
    4. <span class="submenu" id="sub1"></span>
    6. <div class="menutitle" onclick="SwitchMenu('sub2')"><a href="javascript:HideStart('adds');">Office Add-Ins</a></div>
    7. <span class="submenu" id="sub2"></span>
    9. <div class="menutitle" onclick="SwitchMenu('sub3')"><a href="javascript:HideStart('vbahtml');">VBAHTML - Codeumwandler</a></div>
    10. <span class="submenu" id="sub3"></span>
    12. <div class="menutitle" onclick="SwitchMenu('sub4')"><a href="javascript:HideRiX('rbx');">RibbonX-Workshop</a></div>
    13. <span class="submenu" id="sub4">
    14. <a href="javascript:HideSecX('s40');">Wie alles begann...</a>
    15. <a href="javascript:HideSecX('s43');">Über Sinn und Unsinn von RibbonX</a>
    16. </span>
    18. <div class="menutitle" onclick="SwitchMenu('sub5')"><a href="javascript:HideOwX('olx');">Outlook-Workshop</a></div>
    19. <span class="submenu" id="sub5">
    20. <a href="javascript:HideSecO('s37');">Einführung</a>
    21. <a href="javascript:HideSecO('s38');">Email ausdrucken</a>
    22. </span>
    24. <div class="menutitle" onclick="SwitchMenu('sub6')"><a href="javascript:HideStart('links');">Linktipps</a></div>
    25. <span class="submenu" id="sub6"></span>
    27. <div class="menutitle" onclick="SwitchMenu('sub7')"><a href="javascript:HideStart('partner');">Partner/Kooperationen</a></div>
    28. <span class="submenu" id="sub7"></span>
    30. <div class="menutitle" onclick="SwitchMenu('sub8')"><a href="javascript:HideStart('privat');">Privates</a></div>
    31. <span class="submenu" id="sub8"></span>
    33. <div class="menutitle" onclick="SwitchMenu('sub9')"><a href="javascript:HideStart('impress');">Impressum</a></div>
    34. <span class="submenu" id="sub9"></span>
    36. <div class="menutitle" onclick="SwitchMenu('sub11')"><a href="javascript:HideStart('data');">Datenschutzerklärung</a></div>
    37. <span class="submenu" id="sub11"></span>
    39. <div class="menutitle" onclick="SwitchMenu('sub10')"><a href="feedback.php">Feedback/Anfrage</a></div>
    40. <span class="submenu" id="sub10"></span>
    42. </div>


    Und damit beim Aufrufen der Seite gleich das passende Menü verfügbar ist nutze ich folgenden Code.

    HTML-Quellcode

    1. <script type="text/javascript">
    2. window.onload=function() {
    3. slide();
    4. <?php
    5. if (isset($_GET['ribbonx'])) {
    6. echo "HideRX('".$_GET['ribbonx']."');";
    7. echo "SwitchMenu('sub4')";
    8. }
    9. elseif (isset($_GET['outlook'])) {
    10. echo "HideOX('".$_GET['outlook']."');";
    11. echo "SwitchMenu('sub5')";
    12. }
    13. elseif (isset($_GET['index'])) {
    14. echo "HideStart('".$_GET['index']."');";
    15. echo "SwitchMenu('sub1')";
    16. }
    17. else {
    18. echo "HideStart('startx');";
    19. echo "SwitchMenu('sub1')";
    20. }
    21. ?>
    23. };
    24. </script>


    Wie genau muss ich vorgehen? Und gibt es irgendwo verständliche Anleitungen/Beispiele? Danke!

    Gruß, René

    Wenn du DropDown-Menüs mit nur einer Ebene suchst, ist folgendes gut: silent-fran.de/css/tutorial/aufklappmenue.html Der Stil ist jetzt nicht gerade der schönste, aber da kann man ja nachhelfen ;) Bedenke aber, dass CSS-Menüs bei älteren Browsern oft Probleme machen. Ich bin zwar selber eher ein Fan von Websites ohne JavaScript, aber da muss man leider nachhelfen.
    Drei Worte, die dein Programmieren verändern: Option Strict On

Facebook
Telefonspende