js menü in ts umsetzen [Gelöst]

  • The_C The_C
    Padawan
    0 x
    51 Beiträge
    0 Hilfreiche Beiträge
    04. 09. 2011, 14:21

    hallo,
    habe bei der umsetzung eines js menüs probleme funktioniert einwandfrei ohne typo3 leider nicht mit.

    bei einem klick auf den ersten menüpunkt sollte sich das untermenü offnen statdessen öffnen sich alle menüpunkte... irgendwas mache ich da im ts falsch!

    für das menu habe ich im tv die <ul class="menu"> auf (inner) gemapt und natürlich mit dem typoscript objektpfad versehen.
    ich hoffe ich habe euch genügend infos gegeben um mir bei dem problem zu helfen.

    danke schon mal jetzt für eure hilfe...

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <!DOCTYPE html
    3. PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    4. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    5. <html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml">
    6.  
    7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    8.  
    9. <style type="text/css">
    10. <!--
    11. .menu {
    12. width: 250px;
    13. padding: 20px 0 0 0px;
    14. background: transparent;
    15. }
    16.  
    17. .menu .menuheader {
    18. font: bold 14px Verdana, Arial, Helvetica;
    19. color: white;
    20. background: red;
    21. margin-bottom: 10px;
    22. text-transform: uppercase;
    23. padding: 4px 0 4px 30px;
    24. cursor: pointer;
    25. }
    26.  
    27. .menuheader.active {
    28. background-color:#749200;
    29. }
    30.  
    31. .menu ul{
    32. font: 13px Verdana, Arial, Helvetica;
    33. list-style-type: none;
    34. margin: 0;
    35. padding: 0;
    36. margin-bottom: 8px;
    37. display: none;
    38. }
    39.  
    40. .menu ul li{
    41. padding-bottom: 0px;
    42. }
    43.  
    44. .menu ul li a{
    45. color: #3A3A3A;
    46. /*background: url(arrowbullet.png) no-repeat center left;*/
    47. display: block;
    48. padding: 3px 0;
    49. padding-left: 40px;
    50. text-decoration: none;
    51. font-weight: bold;
    52. border-bottom: 1px dotted #3A3A3A;
    53. font-size: 90%;
    54. }
    55.  
    56. .menu ul li a:hover {
    57. color: #2e7d53;
    58. background-color: #E2FCDE;
    59. }
    60.  
    61. .menuheader:hover {
    62. background: blue;
    63. }
    64.  
    65. /* 3tes Menü Level*/
    66.  
    67. .menu ul ul{
    68. font: 13px Verdana, Arial, Helvetica;
    69. list-style-type: none;
    70. margin: 0 0 0 0px;
    71. padding: 0;
    72. margin-bottom: 8px;
    73. }
    74.  
    75. .menu ul ul a {
    76. color: #3A3A3A;
    77. display: block;
    78. padding: 3px 0;
    79. padding-left: 50px;
    80. text-decoration: none;
    81. font-weight: normal;
    82. border-bottom: 1px dotted #3A3A3A;
    83. font-size: 90%;
    84. }
    85. -->
    86.  
    87. <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
    88.  
    89. <script type="text/javascript">
    90. $(document).ready(function() {
    91. $('.menu li').click(function(event) {
    92. event.stopPropagation();
    93. $(this).children("h3, h4, h5, h6, h7, h8, a").toggleClass('active');
    94. $(this).children('ul').slideToggle();
    95. });
    96. });
    97.  
    98. </head>
    99.  
    100.  
    101. <ul class="menu">
    102. <li>
    103. <h3 class="menuheader">Hauptnavi 1</h3>
    104. <ul>
    105. <li>
    106. <a href="#">Unternavi 1</a>
    107. <ul>
    108. <li><a href="#">Unternavi 1.1</a></li>
    109. <li><a href="#">Unternavi 1.2</a></li>
    110. <li><a href="#">Unternavi 1.3</a></li>
    111. </ul>
    112. </li>
    113.  
    114. <li><a href="#">Unternavi 2</a></li>
    115. </ul>
    116. </li>
    117. <li>
    118. <h3 class="menuheader">Hauptnavi 2</h3>
    119. <ul>
    120. <li>
    121. <ul>
    122. <li><a href="#">Unternavi 2.1</a></li>
    123. <li><a href="#">Unternavi 2.2</a></li>
    124. </ul>
    125. </li>
    126. <li><a href="#">Unternavi 2</a></li>
    127. </ul>
    128. </li>
    129. </ul>
    130.  
    131. </body>
    132.  
    133. </html>

    1. lib.nav = HMENU
    2. lib.nav {
    3. wrap = <li>|</li>
    4. 1 = TMENU
    5. 1 {
    6. expAll = 1
    7. noBlur = 1
    8. NO = 1
    9. NO {
    10. allWrap = <h3 class="menuheader">|</h3>
    11. doNotLinkIt = 1
    12. }
    13. }
    14. 2 = TMENU
    15. 2 {
    16. expAll = 1
    17. noBlur = 1
    18. wrap = <ul>|</ul>
    19. NO = 1
    20. NO {
    21. wrapItemAndSub = <li>|</li>
    22. ACT < .NO
    23. ACT.ATagParams = class="aktiv"
    24. }
    25. }
    26. 3 < .2
    27. 3.wrap = <ul>|</ul>
    28. }


  • 1
  • Chrissli Chrissli
    Jedi-Ratsmitglied
    0 x
    710 Beiträge
    9 Hilfreiche Beiträge
    05. 09. 2011, 21:55

    Hallo The_C,

    kann dir leider so nicht helfen,
    da sich das ganze SEHR schlecht liest.

    Da du aber eine Version ohne Typo3 zu haben scheints,
    die funktioniert, würde ich an deiner Stelle mal den Output
    von Typo3 damit vergleichen und sehen was bei Typo3 anders ist.

    Evtl. ist etwas falsch gewrappt oder eine CSS-Klasse, -ID o.ä
    fehlt oder ist falsch.

    BTW:
    Ist das ein Fehler des Forums

    1. $(this).children("h3, h4, h5, h6, h7, h8, a&quot<img src="typo3conf/ext/mm_forum//res/smilies/icon_wink.gif" alt="icon_wink.gif" />.toggleClass('active');

    oder hast du das wirklich so im HTML-Stehen ???

    God's in his heaven, all's right with the world

  • The_C The_C
    Padawan
    0 x
    51 Beiträge
    0 Hilfreiche Beiträge
    05. 09. 2011, 22:15

    Danke für deine Antwort!
    Ich habe das problem schon gelöst

  • The_C The_C
    Padawan
    0 x
    51 Beiträge
    0 Hilfreiche Beiträge
    05. 09. 2011, 22:18

    Anscheinend wandelt das Forum meinen js Code um!
    Sehr seltsam

  • Chrissli Chrissli
    Jedi-Ratsmitglied
    0 x
    710 Beiträge
    9 Hilfreiche Beiträge
    05. 09. 2011, 22:55

    Freut mich
    Es gibt da unten rechts einen Button,
    damit sagt man dem Thread => GELÖST,
    dann muss da keiner mehr drüber nachdenken.

    Schönen abend dir

    God's in his heaven, all's right with the world

  • 1