Standard Dynamische Navigationsleiste probleme

  • geschlossen
  • JavaScript

  • Timox
  • 1641 Aufrufe 3 Antworten

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

  • Standard Dynamische Navigationsleiste probleme

    Hallo liebe Forum,
    ich bin keiner Programmiere, aber ich habe versucht so ein Art Dynamische Navigationsleiste mit zu schreiben und das hat auch geklappt. Allerdings habe ich ein kleines Problem. Das Geschwindichkeit von der Menus finde ich zu hoch! Wenn ich auf irgendwas klicke geht alles auf aber es ist sehr schnell.. ich weiß es nicht wie ich mein Problem beschreiben kann aufjedenfall kann ich nur sagen dass meine Liste sehr schnell ist und ich kann nicht z.B von Komponente -> 2. Buch auf Bearbeitung gehen!?
    Kann jemand mir vielleicht weiter helfen?
    Ich kopiere hier mein Q-Code rein!
    Danke + Gruß
    Timo

    HTML-Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2. <html>
    3. <head>
    4. <meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
    5. <TITLE>TestMeister</TITLE>
    6. <link href="stylesheets/common.css" type="text/css" rel="stylesheet">
    8. <script type="text/javascript">
    9. function einblenden() {
    10. this.className="hoverIE"; this.firstChild.className="hoverIE";
    11. }
    12. function ausblenden() {
    13. this.className=""; this.firstChild.className="";
    14. }
    15. </script>
    17. <style type="text/css">
    19. ul#Navigation {
    20. margin: 0; padding: 0;
    21. }
    23. /* dynamisches Ein-/Ausblenden wenn möglich kann man weg machen*/
    24. ul#Navigation li ul {
    25. display: none;
    26. }
    27. /* dynamisches Ein-/Ausblenden */
    28. ul#Navigation li:hover>ul {
    29. display: block;
    30. }
    32. /* dynamisches Ein-/Ausblenden der JavaScript-generierten Klasse im IE */
    33. * html ul#Navigation li.hoverIE {
    34. margin-right:0; /* reservierten Platz freigeben */
    35. margin-bottom:-3.15em; /* Fehlerkorrektur, ggfls. anpassen */
    36. }
    37. * html ul#Navigation li.hoverIE ul {
    38. display: block;
    39. }
    42. * html ul#Navigation li .hoverIE {
    43. width: 10.3em;
    44. w\idth: 8.2em; /* (IE 6 in standards-compliant mode) */
    45. background: #e00 url(pfeil.gif) no-repeat center right;
    46. }
    47. </style>
    48. <!--[if IE]>
    49. <script type="text/javascript">
    50. // <![CDATA[
    51. if(window.navigator.systemLanguage && !window.navigator.language) {
    52. function hoverIE() {
    53. var LI = document.getElementById('Navigation').firstChild;
    54. do {
    55. if (sucheUL(LI.firstChild)) {
    56. LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
    57. }
    58. LI = LI.nextSibling;
    59. }
    60. while(LI);
    61. }
    63. function sucheUL(UL) {
    64. do {
    65. if(UL) UL = UL.nextSibling;
    66. if(UL && UL.nodeName == 'UL') return UL;
    67. }
    68. while(UL);
    69. return false;
    70. }
    72. function einblenden() {
    73. var UL = sucheUL(this.firstChild);
    74. UL.style.display = 'block'; UL.style.backgroundColor = '#eee';
    75. }
    76. function ausblenden() {
    77. sucheUL(this.firstChild).style.display = 'none';
    78. }
    80. window.onload=hoverIE;
    81. }
    82. // ]]>
    83. </script>
    84. <![endif]-->
    85. </head>
    86. <body class='navbar'>
    88. <div class="navsection"></div>
    89. <div class="navsectiontitle">TEST</div>
    90. <ul class="navsectionlinks">
    91. <div id="Tmenu">
    92. <ul id="Navigation">
    93. <li><a id="aktuell" href="#Beispiel">Komponente</a>
    94. <ul>
    95. <li><a href="">1. Seite</a></li>
    96. <li><a href="#Beispiel">2. Seite</a></li>
    97. <li><a href="#Beispiel">3. Seite</a></li>
    98. <li><a href="#Beispiel">4. Seite</a></li>
    99. <li><a href="#Beispiel">5. Seite</a></li>
    100. <li><a href="#Beispiel">6. Seite</a></li>
    101. <li><a id="aktuell" href="#Beispiel">2. Buch</a>
    102. <ul>
    103. <li><a href="">1. Seite</a></li>
    104. <li><a href="#Beispiel">2. Seite</a></li>
    105. <li><a href="#Beispiel">3. Seite</a></li>
    106. <li><a href="#Beispiel">4. Seite</a></li>
    107. <li><a href="#Beispiel">5. Seite</a></li>
    108. <li><a href="#Beispiel">6. Seite</a></li>
    109. </ul>
    110. </li>
    111. </ul>
    112. </li>
    113. <li><a id="aktuell" href="#Beispiel">Bearbeitung</a>
    114. <ul>
    115. <li><a href="#Beispiel">1. Bearbeitung</a></li>
    116. <li><a href="#Beispiel">2. Bearbeitung</a></li>
    117. <li><a href="#Beispiel">3. Bearbeitung</a></li>
    118. <li><a href="#Beispiel">4. Bearbeitung</a></li>
    119. <li><a href="#Beispiel">5. Bearbeitung</a></li>
    121. </ul>
    122. </li>
    124. </ul>
    125. <div></div>
    126. </div>
    127. </ul>
    128. </html>
    Alles anzeigen

  • Hi,
    also erstmal die Frage was das ganze JS da soll, wenn du die Sache doch mit CSS realisiert hast oO"

    Da du es im HTML-Fourm gepostet hast, glaube ich suchst du nach einer HTML-Antwort.
    Also da wird es schwierig - es gibt höchstens CSS Transitions Module Level 3. Aber das ist CSS3 und wird nur von den wenigen guten Browsern unterstützt ^^

    So musst du auf JS zurückgreifen: Einfach ein Timer (bzw. Interval), der die Höhe oder Opacity hoch schraubt.

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Broken Sword ()

  • Beispiel für opacity:

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <title>let it disappear</title>
    5. <script type="text/javascript">
    6. function letItdisappear() {
    7. if(document.getElementById('id').style.opacity == 0) clearInterval(timer);
    8. document.getElementById('id').style.opacity-= 0.1;
    9. }
    10. var timer = 0;
    11. function start() {
    12. if(timer == 0) timer = setInterval('letItdisappear()',100);
    13. }
    14. </script>
    15. </head>
    16. <body>
    17. <div id="id" onclick="start()" style="opacity:1">click me</div>
    18. </body>
    19. </html>
    Alles anzeigen


    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Broken Sword ()