[Frage] responsives DropDown-Menü TYPO3-Version: 6.2.7

  • typo3_hp typo3_hp
    Jedi-Meister
    0 x
    390 Beiträge
    0 Hilfreiche Beiträge
    06. 09. 2015, 19:09

    Guten Abend!

    Ich suche eine Anleitung für ein responsives Dropdown-Menü unter Typo3.
    Im Netz habe ich nicht wirklich etwas gefunden.

    Habt Ihr mir ein gutes Tutorial?

    LG und Danke


  • 1
  • Chrissli Chrissli
    Jedi-General
    0 x
    1015 Beiträge
    28 Hilfreiche Beiträge
    07. 09. 2015, 09:05

    Schau doch mal hier.
    Diese lassen sich relativ einfach in Typo3 umsetzen
    [url]http://www.cssplay.co.uk/menus/[/url]

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

  • typo3_hp typo3_hp
    Jedi-Meister
    0 x
    390 Beiträge
    0 Hilfreiche Beiträge
    07. 09. 2015, 20:25

    Hallo vielen Dank!

    Habe es soweit hinbekommen, jedoch fehlt mir noch der richtige TS-Code.

    Der HTML-Code selbst passt soweit. Nur muss ich das TS irgendwie hinbekommen... :-(

    So ist der Soll-Code:

    HTML-Code:

    1. <nav id="nav" role="navigation">
    2. <a href="#nav" title="Show navigation">Show navigation</a>
    3. <a href="#" title="Hide navigation">Hide navigation</a>
    4.  
    5. <ul>
    6. <li>
    7. <a href="/" aria-haspopup="false">Home</a>
    8.  
    9. </li>
    10. <li>
    11. <a href="/" aria-haspopup="false">site_1</a>
    12. <ul>
    13. <li><a href="/">site_1_1</a></li>
    14. <li><a href="/">site_1_2</a></li>
    15. </ul>
    16. </li>
    17.  
    18. <li>
    19. <a href="/" aria-haspopup="false">site_2</a>
    20. <ul>
    21. <li><a href="/">site_2_1</a></li>
    22. <li><a href="/">site_2_2</a></li>
    23. </ul>
    24. </li>
    25.  
    26. <li>
    27. <a href="/" aria-haspopup="false">site_3</a>
    28. <ul>
    29. <li><a href="/">site_3_1</a></li>
    30. <li><a href="/">site_3_2</a></li>
    31. </ul>
    32. </li>
    33.  
    34. <li>
    35. <a href="/" aria-haspopup="false">site_4</a>
    36. <ul>
    37. <li><a href="/">site_4_1</a></li>
    38. <li><a href="/">site_4_2</a></li>
    39. </ul>
    40. </li>
    41.  
    42. </ul>
    43.  
    44.  
    45. </nav>

    Und mit diesem Typo3-Skript habe ich es versucht.

    Ich muss es irgendwie hinbekommen, den ganzen Quellcode inkl.

    [b]<nav id="nav" role="navigation">[/b]
    [b]<a href="#nav" title="Show navigation">Show navigation</a>[/b]
    [b]<a href="#" title="Hide navigation">Hide navigation</a>[/b]

    im TS zu generieren.

    Code:

    1. ### Menü ###
    2. subparts.tempmenu = HMENU
    3. subparts.tempmenu {
    4. ### Erste Ebene ###
    5. 1 = TMENU
    6. 1 {
    7. wrap = <ul>|</ul>
    8. expAll = 1
    9. NO.wrapItemAndSub = <li aria-haspopup="false">|</li>
    10. ACT < .NO
    11. ACT = 1
    12. ACT.ATagParams = class="active"
    13. }
    14. ### Zweite, dritte und vierte Ebene (Kopieren von erster Ebene) ###
    15. 2 < .1
    16. #3 < .1
    17. #4 < .1
    18. }

    Das Linkziel "/" ist natürlich nur testweise so im Quellcode. Da soll später natürlich durch das TS der richtige Link eingefügt werden!

    Lieben Dank

  • freshman17 freshman1...
    Sternenflotten-Admiral
    0 x
    218 Beiträge
    2 Hilfreiche Beiträge
    09. 09. 2015, 16:36

    Geht auf mehreren Wegen:

    Beispiel 1:

    1. subparts.tempmenu = HMENU
    2. subparts.tempmenu {
    3.  
    4. noBlur = 1
    5. entryLevel = 0
    6. excludeUidList =
    7.  
    8. wrap (
    9. <nav id="nav" role="navigation">
    10. <a href="#nav" title="Show navigation">Show navigation</a>
    11. <a href="#" title="Hide navigation">Hide navigation</a>
    12. |
    13. </nav>
    14. )
    15.  
    16. 1 = TMENU
    17. 1 {
    18. expAll = 1
    19.  
    20. wrap = <ul>|</ul>
    21.  
    22. NO = 1
    23. NO.wrapItemAndSub = <li>|</li>
    24. NO.ATagParams = aria-haspopup="false"
    25.  
    26. ACT < .NO
    27. ACT.wrapItemAndSub = <li class="active">|</li>
    28. }
    29.  
    30. 2 = TMENU
    31. 2 {
    32. expAll = 1
    33. wrap = <ul>|</ul>
    34.  
    35. NO = 1
    36. NO.wrapItemAndSub = <li>|</li>
    37.  
    38. ACT < .NO
    39. ACT.wrapItemAndSub = <li class="active">|</li>
    40. }
    41. }

    Beispiel 2:

    1. subparts.tempmenu = COA
    2. subparts.tempmenu {
    3. 10 = TEXT
    4. 10.value (
    5. <nav id="nav" role="navigation">
    6. <a href="#nav" title="Show navigation">Show navigation</a>
    7. <a href="#" title="Hide navigation">Hide navigation</a>
    8. )
    9. 20 = HMENU
    10. 20 {
    11. noBlur = 1
    12. entryLevel = 0
    13. excludeUidList =
    14.  
    15. 1 = TMENU
    16. 1 {
    17. expAll = 1
    18.  
    19. wrap = <ul>|</ul>
    20.  
    21. NO = 1
    22. NO.wrapItemAndSub = <li>|</li>
    23. NO.ATagParams = aria-haspopup="false"
    24.  
    25. ACT < .NO
    26. ACT.wrapItemAndSub = <li class="active">|</li>
    27. }
    28. 2 < .1
    29. }
    30. 30 = TEXT
    31. 30.value = </nav>
    32. }

  • 1