Aufklappbares Menü

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

  • Upss... ja natürlich das meine ich JavaScript!

    Dies ist eine Java +CSS Lösung!

    Bitteschön

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Navi Loesung</title>
    6. <script language="javascript">
    7. var timeout = 500;
    8. var closetimer = 0;
    9. var ddmenuitem = 0;
    11. // open hidden layer
    12. function mopen(id)
    13. {
    14. // cancel close timer
    15. mcancelclosetime();
    17. // close old layer
    18. if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    20. // get new layer and show it
    21. ddmenuitem = document.getElementById(id);
    22. ddmenuitem.style.visibility = 'visible';
    24. }
    25. // close showed layer
    26. function mclose()
    27. {
    28. if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    29. }
    31. // go close timer
    32. function mclosetime()
    33. {
    34. closetimer = window.setTimeout(mclose, timeout);
    35. }
    37. // cancel close timer
    38. function mcancelclosetime()
    39. {
    40. if(closetimer)
    41. {
    42. window.clearTimeout(closetimer);
    43. closetimer = null;
    44. }
    45. }
    47. // close layer when click-out
    48. document.onclick = mclose;
    49. </script>
    50. <style type="text/css">
    51. <!--
    52. #sddm
    53. { margin: 0;
    54. padding: 0;
    55. z-index: 30}
    57. #sddm li
    58. { margin: 0;
    59. padding: 0;
    60. list-style: none;
    61. float: left;
    62. font: bold 11px arial}
    64. #sddm li a
    65. { display: block;
    66. margin: 0 1px 0 0;
    67. padding: 4px 10px;
    68. width: 60px;
    69. background: #5970B2;
    70. color: #FFF;
    71. text-align: center;
    72. text-decoration: none}
    74. #sddm li a:hover
    75. { background: #49A3FF}
    77. #sddm div
    78. { position: absolute;
    79. visibility: hidden;
    80. margin: 0;
    81. padding: 0;
    82. background: #EAEBD8;
    83. border: 1px solid #5970B2}
    85. #sddm div a
    86. { position: relative;
    87. display: block;
    88. margin: 0;
    89. padding: 5px 10px;
    90. width: auto;
    91. white-space: nowrap;
    92. text-align: left;
    93. text-decoration: none;
    94. background: #EAEBD8;
    95. color: #2875DE;
    96. font: 11px arial}
    98. #sddm div a:hover
    99. { background: #49A3FF;
    100. color: #FFF}
    101. -->
    102. </style></head>
    104. <body>
    105. <ul id="sddm">
    106. <li>
    107. <a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()"><img src="../olaf/images/berichte.jpg" /></a>
    108. <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    109. <a href="#">HTML Drop Down</a>
    110. <a href="#">DHTML Menu</a>
    111. <a href="#">JavaScript DropDown</a>
    112. <a href="#">Cascading Menu</a>
    113. <a href="#">CSS Horizontal Menu</a>
    114. </div>
    115. </li>
    116. <li>
    117. <a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()"><img src="../olaf/images/berichte.jpg" /></a>
    118. <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
    119. <a href="#">HTML Drop Down</a>
    120. <a href="#">DHTML Menu</a>
    121. <a href="#">JavaScript DropDown</a>
    122. <a href="#">Cascading Menu</a>
    123. <a href="#">CSS Horizontal Menu</a>
    124. </div>
    126. </ul>
    127. </body>
    128. </html>
    Alles anzeigen
    --Kommt noch--

  • Ok, das sieht ja eigentlich gar nicht schlecht aus. An welchen Stellen sollen denn deine Buttons erscheinen? Eigentlich sollte sich alles über CSS regeln lassen.

    Die Bilder auf dem Menü kannst du ja direkt ändern, indem du das Bild berichte.jpg austauschst. Wenn du an den einzelnen Untermenüpunkten noch Bilder haben willst, wird das etwas komplizierter, ist aber auch nicht unmöglich.

    Sag erst einmal was du erreichen willst...

  • Wie wär s ohne Javascript, also nur mit CSS?

    Wenn s dich interessiert, dann schau dir des mal an
    (Ich hoff, dass ich nix vergessen hab)

    Nutzt hover aus. Damit es im IE auch ohne Probleme funktioniert, klatscht du das in dein Stylesheet
    (csshover.htc is als Dateianhang dabei)

    Quellcode

    1. /* Browserweichen für Body Element (nur für IE-Versionen) */
    2. * html > body {
    3. behavior:url("htc/csshover.htc");
    4. }
    5. *>htm body {
    6. behavior:url("htc/csshover.htc");
    7. }
    8. * html body {
    9. behavior:url("htc/csshover.htc");
    10. }
    11. *+html body {
    12. behavior:url("htc/csshover.htc");
    13. }
    14. /* Browserweichen ENDE */
    Alles anzeigen


    Dann die normalen Anweisungen

    Quellcode

    1. #dropdown, #dropdown ul {
    2. list-style-type:none;
    3. margin:0;
    4. padding:0;
    5. }
    6. #dropdown li {
    7. width:190px;
    8. float:left;
    9. }
    10. #dropdown li ul {
    11. display:none;
    12. }
    13. #dropdown li:hover ul {
    14. display:block;
    15. }
    Alles anzeigen


    Und der HTML-Code dazu

    Quellcode

    1. <ul id="dropdown" style="z-index:1;position:absolute;">
    2. <li>
    3. <a href="?show=admin">
    4. <div class="adminnavi_top">Hauptmen&uuml;</div>
    5. </a>
    6. <ul>
    7. <li>
    8. <a href="?show=admin&mode=home">
    9. <div class="adminnavi_ele">Startseite</div>
    10. </a>
    11. </li>
    12. <li>
    13. <a href="?show=admin&mode=current">
    14. <div class="adminnavi_ele">Aktuelles</div>
    15. </a>
    16. </li>
    17. <li>
    18. <a href="?show=admin&mode=management">
    19. <div class="adminnavi_ele">Vorstand</div>
    20. </a>
    21. </li>
    22. ...
    Alles anzeigen
    Dateien

    • csshover.zip

      (1,64 kB, 377 mal heruntergeladen, zuletzt: )

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von venum-lk () aus folgendem Grund: csshover.htc angefügt