[Frage] Verschachteltes Menü in TS umsetzen [Gelöst] TYPO3-Version: 6.1.1

  • mille_85 mille_85
    T3PO
    0 x
    18 Beiträge
    0 Hilfreiche Beiträge
    15. 11. 2013, 14:36

    Hallo,
    ich bin zimelich neu in Sachen TypoScript.
    Einfache Menüs habe ich schon umgesetzt, allerdings habe ich nun folgendes Problem.
    Für eine Freundin habe ich ein Layout entworfen, in dem die Navigation schräg verlaufen soll, da sie sich dann besser ins Layout eingliedert. Ob das sinnvoll ist oder nicht sei mal dahin gestellt :)

    Was genau ich damit meine seht ihr im Anhang...

    Meine HTML und CSS-Dateien sieht wie folgt aus:

    1. <div>
    2. <ul>
    3. <div class="navi_indent"><li><a href="Startseite.html">Startseite</a></li>
    4. <div class="navi_indent"><li><a href="Über uns.html">Über uns</a></li>
    5. <div class="navi_indent"><li><a href="Kontakt.html">Kontakt</a></li>
    6. <div class="navi_indent"><li><a href="Preise.html">Preise</a></li>
    7. <div class="navi_indent"><li><a href="Impressum.html">Impressum</a></li></div>
    8. </div>
    9. </div>
    10. </div>
    11. </div>
    12. </ul>
    13. </div>
    14. [code]
    [/code]

    1. /* CSS Document */
    2. html, body {
    3. margin: 0px;
    4. padding: 0px;
    5. }
    6.  
    7. .navi_indent {
    8. list-style-type: none;
    9. position: relativ;
    10. left:10px;
    11. }
    12.  
    13. div {
    14. position: relative;
    15. }

    Anhänge (1)
    Menü.jpg image/jpeg 0,00 B 170 heruntergeladen
  • etux etux
    Jedi-Meister
    0 x
    360 Beiträge
    13 Hilfreiche Beiträge
    15. 11. 2013, 16:39 - Lösung

    Einfach, aber ziemlich Käse:

    1. lib.schraegesMenue = HMENU
    2. lib.schraegesMenue {
    3. 1 = TMENU
    4. 1 {
    5. wrap = <ul>|</ul>
    6. NO {
    7. allWrap = <li style="padding-left: {register:count_HMENU_MENUOBJ}em;">|</li>
    8. allWrap.insertData = 1
    9. }
    10. }
    11. }

    Besser wäre es, den Listenelementen Klassen (oder IDs) zu vergeben. Die linken Paddings (oder Margins) landen dann entsprechend in die CSS-Datei.
    Extra Elementen, wie div.navi_indent, brauchst Du dabei nicht. Außerdem wird der Quellcode dadurch invalide. ;)

    Klassen (oder IDs) könntest Du nach einer der Methoden vergeben:

    1. NO {
    2. wrapItemAndSub = <li class="li-{register:count_HMENU_MENUOBJ}">|</li>
    3. wrapItemAndSub.insertData = 1
    4. }
    5.  
    6. # oder
    7.  
    8. NO {
    9. allWrap = <li class="li-{elementUid}">|
    10. wrapItemAndSub = |</li>
    11. subst_elementUid = 1
    12. }
    13.  
    14. # oder
    15.  
    16. NO {
    17. before {
    18. dataWrap = <li class="li-{field:uid}">|
    19. }
    20. wrapItemAndSub = |</li>
    21. }
    22.  
    23. # oder
    24.  
    25. NO {
    26. before.cObject = TEXT
    27. before.cObject {
    28. wrap = <li class="|
    29. field = title
    30. case = lower
    31. token.char = 32
    32. cObjNum = 1
    33. 1 {
    34. current = 1
    35. wrap = |-
    36. }
    37. }
    38. substring = 0,-1
    39. wrap = |">
    40. }
    41. }
    42. wrapItemAndSub = |</li>
    43. }


  • 1
  • mille_85 mille_85
    T3PO
    0 x
    18 Beiträge
    0 Hilfreiche Beiträge
    15. 11. 2013, 14:38

    Oje, wollte noch gar nicht abschicken.
    Meine Frage nun wie setzte ich das in TS um?
    Mein Problem sind die verschachtelten DIV-Elemente...

  • etux etux
    Jedi-Meister
    0 x
    360 Beiträge
    13 Hilfreiche Beiträge
    15. 11. 2013, 16:39

    Einfach, aber ziemlich Käse:

    1. lib.schraegesMenue = HMENU
    2. lib.schraegesMenue {
    3. 1 = TMENU
    4. 1 {
    5. wrap = <ul>|</ul>
    6. NO {
    7. allWrap = <li style="padding-left: {register:count_HMENU_MENUOBJ}em;">|</li>
    8. allWrap.insertData = 1
    9. }
    10. }
    11. }

    Besser wäre es, den Listenelementen Klassen (oder IDs) zu vergeben. Die linken Paddings (oder Margins) landen dann entsprechend in die CSS-Datei.
    Extra Elementen, wie div.navi_indent, brauchst Du dabei nicht. Außerdem wird der Quellcode dadurch invalide. ;)

    Klassen (oder IDs) könntest Du nach einer der Methoden vergeben:

    1. NO {
    2. wrapItemAndSub = <li class="li-{register:count_HMENU_MENUOBJ}">|</li>
    3. wrapItemAndSub.insertData = 1
    4. }
    5.  
    6. # oder
    7.  
    8. NO {
    9. allWrap = <li class="li-{elementUid}">|
    10. wrapItemAndSub = |</li>
    11. subst_elementUid = 1
    12. }
    13.  
    14. # oder
    15.  
    16. NO {
    17. before {
    18. dataWrap = <li class="li-{field:uid}">|
    19. }
    20. wrapItemAndSub = |</li>
    21. }
    22.  
    23. # oder
    24.  
    25. NO {
    26. before.cObject = TEXT
    27. before.cObject {
    28. wrap = <li class="|
    29. field = title
    30. case = lower
    31. token.char = 32
    32. cObjNum = 1
    33. 1 {
    34. current = 1
    35. wrap = |-
    36. }
    37. }
    38. substring = 0,-1
    39. wrap = |">
    40. }
    41. }
    42. wrapItemAndSub = |</li>
    43. }

  • mille_85 mille_85
    T3PO
    0 x
    18 Beiträge
    0 Hilfreiche Beiträge
    15. 11. 2013, 19:30

    Hey, danke für die schnelle und ausführliche Antwort!
    Ja sowas wie Klassen definieren habe ich mir gedacht, wusste aber nicht wie man das realisiert.
    Die ganzen Befehle kannte ich noch nicht :)

  • etux etux
    Jedi-Meister
    0 x
    360 Beiträge
    13 Hilfreiche Beiträge
    16. 11. 2013, 10:55

    Zitiert von: mille_85
    Hey, danke für die schnelle und ausführliche Antwort!

    Bitte, gern. :)
    Zitiert von: mille_85
    Ja sowas wie Klassen definieren habe ich mir gedacht, wusste aber nicht wie man das realisiert.
    Die ganzen Befehle kannte ich noch nicht :)

    Da Du den Thread nicht auf „gelöst“ gestellt hast – hattest Du denn kein Erfolg damit?

  • 1