[Frage] Menü ist dauerhaft ausgeklappt, Menü ist untereinander - nicht nebeneinander TYPO3-Version: 6.2.7

  • Dounat Dounat
    Jar Jar Binks
    0 x
    1 Beiträge
    0 Hilfreiche Beiträge
    23. 07. 2015, 19:51

    Servus, ich habe mich an einem Menü nach dieser Anleitung versucht: http://www.mortox.de/typo3-tipps/typoscript-sammlung/dropdown-menue.html Leider funktioniert es bei mir nicht, ich hab schon viel rumprobiert und den enstandenen Quelltext überprüft, konnte aber erstmal keinen Fehler feststellen. Wenn ich die zweite Menüebene rausnehme, wird das Menü richtig angezeigt, es fehlen halt nur die Unterpunkte. Es handelt sich um diese Website http://www.science-lab.eu

    Das ist mein TypoScript Code vom Template

    1. ### Slidemenue NAVIGATION (1)SECONDmenue
    2. menue = HMENU
    3. menue {
    4.  
    5. special = directory
    6. special.value = 2
    7. entryLevel = 2
    8. 1 = TMENU
    9. 1 {
    10. wrap = <ul class=navy>|</ul>
    11. expAll = 1
    12. NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li>
    13. ACT < .NO
    14. ACT = 1
    15. ACT.ATagParams = class="current"
    16. }
    17. 2 = TMENU
    18. 2 {
    19. wrap = <ul onmouseover="show(this)" onmouseout="hide(this)">|</ul>
    20. NO.allWrap = <li>|</li>
    21. }
    22. }
    23.  
    24.  
    25.  
    26. ### Slidemenue NAVIGATION (1)SECONDmenue
    27. SECONDmenue = HMENU
    28. SECONDmenue {
    29.  
    30. special = directory
    31. special.value = 121
    32. entryLevel = 2
    33. 1 = TMENU
    34. 1 {
    35. wrap = <ul class=SECONDnavy>|</ul>
    36. expAll = 1
    37. NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li>
    38. ACT < .NO
    39. ACT = 1
    40. ACT.ATagParams = class="current"
    41. }
    42. }

    Und natürlich das CSS
    [code]
    1. #navy {
    2. font-family: Mako, Arial;
    3. float: left;
    4. background-image: none;
    5. background-repeat: repeat;
    6. background-attachment: scroll;
    7. background-position: 0 0;
    8. height: auto;
    9. margin: 0;
    10. padding: 0;
    11. border-width: 0;
    12. /*margin: 0 0 1em 0; */
    13. }
    14. #navy a {
    15. color: #fff;
    16. font-family: Mako, Arial;
    17. font-size: 14px;
    18. font-weight: normal;
    19. background-color: #ed6b06;
    20. text-decoration: none;
    21. position: relative;
    22. float: left;
    23. margin: 0;
    24. padding: 11px 20px 12px;
    25. border-right: 1px solid #f8984e;
    26. display: block; }
    27. #navy ul {
    28. text-decoration: none;
    29. position: relative;
    30. float: left;
    31. margin: 0;
    32. padding: 0;
    33. list-style: none; }
    34. #nav li /* OK */ {
    35. float: left;
    36. display: block;
    37. font-weight: normal;
    38. text-decoration:none;
    39. margin: 0;
    40. border-width: 0; }
    41. #navy ul li {
    42. text-decoration: none;
    43. font-weight: normal;
    44. float: left;
    45. margin: 0; }
    46. #navy ul li a:visited {
    47. color: #fff;
    48. font-size: 14px;
    49. font-family: Mako, Arial;
    50. font-weight: normal;
    51. background-color: #ed6b06;
    52. background-image: none;
    53. text-decoration: none;
    54. border-right: 1px solid #f8984e; }
    55. #navy ul li.current a /*Oben quer Activer Zustand*/ {
    56. font-family: Mako, Arial;
    57. color:#fff;
    58. font-size: 14px;
    59. font-weight: normal;
    60. background-color: #939393;
    61. text-decoration: none;
    62. border-right: 1px solid #f8984e; }
    63. #navy ul li a:hover {
    64. font-family: Mako, Arial;
    65. text-decoration: none;
    66. color: #fff;
    67. font-size: 14px;
    68. font-weight: normal;
    69. background-color: #bdbdbd;
    70. border-right: 1px solid #f8984e; }
    71.  
    72. #navy ul li a:focus {
    73. font-family: Mako, Arial;
    74. color: #fff;
    75. font-size: 14px;
    76. font-weight: normal;
    77. background-color: #bdbdbd;
    78. text-decoration: none;
    79. border-right: 1px solid #f8984e; }
    80.  
    81. # mavy l.navy ul.hover, ul.navy li.hover ul, ul.navy li:hover ul {
    82. display:block;
    83. }
    [/code]
    Und das kommt dabei raus:
    [code]
    1. <div id="navy">
    2. <ul class="navy">
    3. <li onmouseover="show(this)" onmouseout="hide(this)">
    4. <a href="index.php?id=17" class="current">Über Science-Lab</a>
    5. <ul onmouseover="show(this)" onmouseout="hide(this)">
    6. <li><a href="index.php?id=17">Über uns</a></li>
    7. <li><a href="index.php?id=18">Was wir wollen</a></li>
    8. <li><a href="index.php?id=19">Wie wir es machen</a></li>
    9. <li><a href="index.php?id=20">Wer uns unterstützt</a></li>
    10. <li><a href="index.php?id=13">Qualität</a></li>
    11. <li><a href="index.php?id=71">Nachgeschlagen</a></li>
    12. <li><a href="index.php?id=99">Jetzt Spenden</a></li>
    13. </ul>
    14. </li>
    15.  
    16. <li onmouseover="show(this)" onmouseout="hide(this)">
    17. <a href="index.php?id=12">Kinderkurse</a><ul onmouseover="show(this)" onmouseout="hide(this)">
    18. <li><a href="index.php?id=60">Kursangebote nach PLZ</a></li>
    19. <li><a href="index.php?id=125">Ferien & Wochenende</a></li>
    20. <li><a href="index.php?id=72">Halbjahreskurse</a></li>
    21. <li><a href="index.php?id=145">Anfrage Kinderkurse</a></li>
    22. </ul>
    23. </li>
    24.  
    25. <li onmouseover="show(this)" onmouseout="hide(this)">
    26. <a href="index.php?id=14">Aus- Weiterbildungen</a><ul onmouseover="show(this)" onmouseout="hide(this)">
    27. <li><a href="index.php?id=29">Im Kindergarten</a></li>
    28. <li><a href="index.php?id=30">In der Grundschule</a></li>
    29. <li><a href="index.php?id=31">Die Zutaten</a></li>
    30. <li><a href="index.php?id=32">Bildungsregionen</a></li></ul>
    31. </li>
    32.  
    33. <li onmouseover="show(this)" onmouseout="hide(this)"><
    34. a href="index.php?id=235">Aktuelle Projekte</a>
    35. <ul onmouseover="show(this)" onmouseout="hide(this)">
    36. <li><a href="index.php?id=236">Wilhelm Stemmer-Stiftung</a></li>
    37. <li><a href="index.php?id=243">Biogen</a></li>
    38. </ul>
    39. </li>
    40. </ul>
    41. </div>
    42.  
    43.  
    44. <div id="SECONDnavyinhalt">
    45. <div id="SECONDnavy">
    46. <ul class="SECONDnavy">
    47. <li onmouseover="show(this)" onmouseout="hide(this)">
    48. <a href="index.php?id=120">Aktuelles</a></li>
    49. <li onmouseover="show(this)" onmouseout="hide(this)">
    50. <a href="index.php?id=56">Kontakt</a></li></ul></div> </div>
    [/code]
    Kann mir jemand sagen, warum das Menü aussieht wie es aussieht und nicht funktioniert.


  • 1
  • casi-g casi-g
    R2-D2
    0 x
    77 Beiträge
    13 Hilfreiche Beiträge
    23. 07. 2015, 20:18

    du hast da ein paar sachen in deinem CSS durcheinander geworfen.

    Ersetze das folgende CSS durch dieses hier:

    1. #navy l.navy ul.hover, ul.navy li.hover ul, ul.navy li:hover ul {
    2. display:block;
    3. }

    1. #navy ul ul {
    2. margin-left:0;
    3. padding: 0 0 5px 0;
    4. position: absolute;
    5. background-color: #26383D;
    6. border:1px solid #FFF9E4;
    7. display:none;
    8. min-width:180px;
    9. top: 40px;
    10. }
    11. #navy ul ul li,
    12. #navy ul ul li a {
    13. float:none;
    14. background-color: transparent;
    15. }
    16.  
    17. #navy ul li.hover ul, ul.navy li.hover ul, ul.navy li:hover ul {
    18. display:block;
    19. }

    Aber das ist ein relativ alter Beitrag (~2007). Das mit dem Javascript ist für den IE6 (IE7 kam 2006 raus). Also wenn du keine IE6 Anpassung benötigst kannst du es dir einfacher machen und nur CSS nutzen.

  • 1