Dropdownmenü - Aktive Ebene eingeblendet lassen?!

  • vanlent vanlent
    T3PO
    0 x
    16 Beiträge
    0 Hilfreiche Beiträge
    16. 09. 2011, 22:03

    Hallo Typo3-Gemeinde,

    stehe jetzt schon tagelang richtig auf dem Schlauch, weil ich versuche ein Dropdownmenü zu erstellen,
    wo die aktive Ebene eingeblendet bleiben soll.

    Bei meinem Beispiel:
    http://www.sunrock-gmbh.de/index.php?id=9
    funktioniert das Menü, wie es bei Mortox.de super erklärt wurde.
    Aber ich hätte gerne, wenn man hier auf "Maria" klickt, dass dann die nächste Ebene (in grau) eingeblendet bleibt, und wiederum die nächste Unterebene bei Hover ein-/ausgeblendet wird.

    1. ### Menü ###
    2. temp.menu = HMENU
    3. temp.menu {
    4. ### Erste Ebene ###
    5. 1 = TMENU
    6. 1 {
    7. wrap = <ul class="menu">|</ul>
    8. expAll = 1
    9. NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li>
    10.  
    11. ACT < .NO
    12. ACT = 1
    13. ACT.ATagParams = class="active"
    14.  
    15. }
    16.  
    17. ### Zweite, dritte und vierte Ebene (Kopieren von erster Ebene) ###
    18. 2 < .1
    19. 3 < .1
    20. 4 < .1
    21. }
    22. page.10.subparts.HAUPTNAVI < temp.menu

    Mein CSS

    1. ul.menu, ul.menu ul {
    2. list-style-type: none;
    3. }
    4.  
    5. ul.menu a {
    6. display: block;
    7. font-weight: normal;
    8. text-decoration: none;
    9.  
    10. }
    11.  
    12. ul.menu a.active {
    13. font-weight: bold;
    14. }
    15.  
    16. .menuparent {
    17. /* aktives untermenu */
    18. visibility:visible;
    19. }
    20.  
    21. ul.menu li, ul.menu ul ul li {
    22. margin: 0;
    23. float: left;
    24. height: 20px;
    25. padding-top: 6px;
    26. padding-right: 10px;
    27. padding-bottom: 6px;
    28. padding-left: 10px;
    29. background-image: url(sunrock-pix/navi-hg-gelb.png);
    30. background-repeat: repeat;
    31. border-left:#000 solid 1px;
    32. }
    33. ul.menu li:first-child {
    34. border:0px;
    35. }
    36.  
    37. ul li.active ul
    38. {
    39. display: block;
    40. }
    41.  
    42. /* Für Unterpunkte keine Float-Eigenschaft, doch weil sonst nix horizontal angezeigt wird */
    43. ul.menu ul li {
    44. float: left;
    45. background-image: url(sunrock-pix/navi-hg-grau.png);
    46. background-repeat: repeat;
    47. }
    48.  
    49. /* Links auf Unterpunkten sollen die Hintergrundfarbe ändern */
    50. ul.menu ul li.hover, ul.menu ul li:hover {
    51. background-color: #FFF9E4;
    52. }
    53.  
    54. /* Zweite Ebene */
    55. ul.menu ul {
    56. margin:0;
    57. padding: 0;
    58. position: absolute;
    59. display: none;
    60. width: 600px;
    61. }
    62.  
    63. /* Zweite Ebene anzeigen */
    64. ul.menu li.hover ul, ul.menu li:hover ul {
    65. display: block;
    66. }
    67.  
    68. /* Dritte Ebene */
    69. ul.menu li.hover ul ul, ul.menu li:hover ul ul {
    70. display: none;
    71. margin-left: 0px; /* Breite eines Listenelements - Überlagerung 160px*/
    72. margin-top: 0px; /* Höhe eines Listenelements */
    73. }
    74.  
    75. /* Dritte Ebene anzeigen */
    76. ul.menu li.hover ul li.hover ul, ul.menu li:hover ul li:hover ul {
    77. display: block;
    78. }
    79.  
    80.  
    81. /* Vierte Ebene */
    82. ul.menu li.hover ul li.hover ul ul, ul.menu li:hover ul li:hover ul ul {
    83. display: none;
    84. }
    85.  
    86. /* Vierte Ebene anzeigen */
    87. ul.menu li.hover ul li.hover ul li.hover ul , ul.menu li:hover ul li:hover ul li:hover ul {
    88. display: block;
    89. }

    Habe ich jetzt ein CSS- oder ein Typoscript-Problem.

    Danke für jede kleine Erklärung.

    Erschöpfte Grüße

    Frank


  • 1
  • etux etux
    Jedi-Meister
    0 x
    360 Beiträge
    13 Hilfreiche Beiträge
    17. 09. 2011, 11:10

    [quote="vanlent"]
    Habe ich jetzt ein CSS- oder ein Typoscript-Problem.
    [/quote]
    In Deiner CSS hast Du die Klassen „menuparent“ und „active“ (für die LI).

    .menuparent {
    /* aktives untermenu */
    visibility:visible;
    }
    ul li.active ul {
    display: block;
    }

    In Deinem TS ist aber nichts davon definiert.

    [quote="vanlent"]
    Aber ich hätte gerne, wenn man hier auf "Maria" klickt, dass dann die nächste Ebene (in grau) eingeblendet bleibt, und wiederum die nächste Unterebene bei Hover ein-/ausgeblendet wird.
    [/quote]
    Am einfachsten kannst Du das uber die Menü-Zustände „ACT“ und „CUR“ steuern.
    Die Klasse „menuparent“ (ACT) blendet alle UL ein, die Klasse „active“ (CUR) unterbindet das für nachfolgenden Uls (außer bei li.active:hover)

    .

  • 1