Navigationsmenü

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

  • Navigationsmenü

    Hallo,

    ich hab folgendes Navigationsmenü für meine Homepage:

    HTML-Quellcode

    1. <div id="navcontainer">
    2. <ul id="navlist">
    3. <li id="active"><a href="???" target="Frame2"id="current">...</a></li>
    4. <li><a href="???" target="Frame2" id="current">...</a></li>
    5. </ul>
    6. </div>
    7. <style type="text/css">
    8. #navlist
    9. {
    10. color: white;
    11. background: #17a;
    12. border-bottom: 0.2em solid #17a;
    13. border-right: 0.2em solid #17a;
    14. padding: 0 1px;
    15. margin-left: 0;
    16. width: 12em;
    17. font: normal 0.8em Verdana, sans-serif;
    18. }
    19. #navlist li
    20. {
    21. list-style: none;
    22. margin: 0;
    23. font-size: 1em;
    24. }
    25. #navlist a
    26. {
    27. display: block;
    28. text-decoration: none;
    29. margin-bottom: 0.5em;
    30. margin-top: 0.75em;
    31. color: white;
    32. background: #39c;
    33. border-width: 1px;
    34. border-style: solid;
    35. border-color: #5bd #035 #068 #6cf;
    36. border-left: 1em solid #fc0;
    37. padding: 0.25em 0.5em 0.4em 0.75em;
    38. }
    39. #navlist a#current { border-color: #5bd #035 #068 #f30; }
    40. #navlist a
    41. {
    42. width: 99%;
    43. /* only necessary for Internet Explorer */
    44. }
    45. #navlist a
    46. {
    47. voice-family: ""}"";
    48. voice-family: inherit;
    49. width: 9.6em;
    50. /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */
    51. }
    52. #navcontainer>#navlist a
    53. {
    54. width: auto;
    55. /* only necessary if you use the hacks above for the Internet Explorer */
    56. }
    57. #navlist a:hover, #navlist a#current:hover
    58. {
    59. background: #28b;
    60. border-color: #069 #6cf #5bd #fc0;
    61. padding: 0.4em 0.35em 0.25em 0.9em;
    62. }
    63. #navlist a:active, #navlist a#current:active
    64. {
    65. background: #17a;
    66. border-color: #069 #6cf #5bd white;
    67. padding: 0.4em 0.35em 0.25em 0.9em;
    68. }
    69. </style>
    Alles anzeigen


    Wie kann ich das jetzt anpassen, dass wenn ich beispielsweise auf den ersten Punkt klicke, dann 1, 2 oder mehrere Unterpunkte aufgehen, aber noch nichts in Frame2 geladen wird.

    Versteht ihr was ich meine?

    PS: Das mit CSS hab ich nicht selber geschrieben, ich kenn mich damit nämlich nicht aus.

    mfg
    Snip3r
    Neulinge * Forenregeln * F.A.Q. * Lexikon
    Suchfunktion* IRC * Teamspeak * User helfen User
    Patrioten reden nur davon, dass sie für ihr Land sterben, niemals davon, dass sie für ihr Land töten. (Bertrand Russell)
  • schnell mal was gecodet ... vielleicht kannst du damit was anfangen!?

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title></title>
    4. <script type="text/javascript">
    5. function ShowHideMenu(theMenu) {
    6. var element = document.getElementById(theMenu);
    7. var displayStyle = (element.style.display == '' || element.style.display == 'none') ? 'block' : 'none';
    8. element.style.display = displayStyle;
    9. }
    10. </script>
    11. <style type="text/css">
    12. a { text-decoration: none; }
    13. .menu { background-color: #EEEEEE; border: #000000 1px solid; cursor: pointer; }
    14. .menuSub { padding-left: 20px; cursor: pointer; }
    15. </style>
    16. </head>
    17. <body>
    18. <table style="width:100%;table-layout:fixed">
    19. <tr>
    20. <td>
    21. <div class="menu" onclick="ShowHideMenu('menuSub01')"><a>menu 01</a></div>
    22. <div class="menuSub" id="menuSub01" style="display:none;">
    23. <a href="anywhere" target="theTarget">sub01</a><br />
    24. <a href="anywhere" target="theTarget">sub02</a><br />
    25. <a href="anywhere" target="theTarget">sub03</a><br />
    26. </div>
    27. <div class="menu" onclick="ShowHideMenu('menuSub02')"><a>menu 02</a></div>
    28. <div class="menuSub" id="menuSub02" style="display:none;">
    29. <a href="anywhere" target="theTarget">sub01</a><br />
    30. <div onclick="ShowHideMenu('menuSub0201')"><a>menu 02 01</a></div>
    31. <div class="menuSub" id="menuSub0201" style="display:none;">
    32. <a href="anywhere" target="theTarget">sub02 01</a><br />
    33. <a href="anywhere" target="theTarget">sub02 02</a><br />
    34. <a href="anywhere" target="theTarget">sub02 03</a><br />
    35. </div>
    36. <a href="anywhere" target="theTarget">sub03</a><br />
    37. </div>
    38. </td>
    39. </tr>
    40. </table>
    41. </body>
    42. </html>
    Alles anzeigen


    ~ C L O S E D ~

    ceeyaa.mex