[Frage] Menü, aktive Seite hervorheben. [Gelöst] TYPO3-Version: 6.1.7

  • 0 x
    8 Beiträge
    0 Hilfreiche Beiträge
    15. 10. 2014, 15:20

    Hallo,
    ich bin am Anfang von typo3 und habe ein Problem beim Menü.
    Ich benutze Version 6.1.8 und habe ein Menü erstellt. Bei diesem Menü bekomme ich es leider nicht richtig hin, dass die aktive Seite "markiert wird" und das hirarchisch nach unten.
    Ich hoffe ich habe mich einigermaßen verständlich ausgedrückt, her mal mein Code.
    Typoscript:
    MENUE = HMENU
    MENUE {
    1 = TMENU
    1 {
    wrap = <ul>|</ul>
    noBlur = 1
    NO = 1
    NO {
    wrapItemAndSub = <li> | </li>
    linkWrap = &nbsp;|&nbsp;&#124;|*|&nbsp;|&nbsp;&#124;|*|&nbsp;|
    ATagBeforeWrap = 1
    }
    IFSUB = 1
    IFSUB {
    wrapItemAndSub = <li> | </li>
    linkWrap = &nbsp;|&nbsp;&#124;|*|&nbsp;|&nbsp;&#124;|*|&nbsp;|
    ATagBeforeWrap = 1
    }
    ACT < .NO
    ACT = 1
    ACTIFSUB < .IFSUB
    }
    2 = TMENU
    2 {
    wrap = <ul class="zweite"> | </ul>
    noBlur = 1
    NO = 1
    NO {
    wrapItemAndSub = <li> | </li>
    linkWrap = &nbsp;|&nbsp;&#124;|*|&nbsp;|&nbsp;&#124;|*|&nbsp;|
    ATagBeforeWrap = 1
    }
    }
    }
    Css:
    #menue {
    position: absolute;
    top:-20px;
    left:0px;
    font-size:40px;
    height:103px;
    width:700px;
    float:left;
    }

    .zweite{
    position: absolute;
    bottom:-10px;
    left:6px;
    font-size:23px;
    }

    #menue ul{
    float:left;
    display:block;
    }
    #menue li{
    float:left;
    display:block;
    }

    #menue a:link, #menue a:visited{
    color:white;
    text-decoration:none;
    }
    #menue a:hover, #menue a:focus, #menue a:active {
    color:black;
    text-decoration:none;
    background-color:white;
    }

    Mir ist klar, dass ich irgendwie das Menü Skript noch nicht richtig kapiert hab.
    Habe schon viel mit dem css rumprobiert,,weswegen es etwas "unsauber" aussieht.
    Könnt ihr mir helfen?
    Vielen Dank

  • jenses jenses
    Flash Gordon
    0 x
    3087 Beiträge
    106 Hilfreiche Beiträge
    16. 10. 2014, 09:43 - Lösung

    Du solltest dich noch mal mit dem Konzept der verschiedenen Zustände der menu items befassen,
    und in deinem TS die richtige Reihenfolge einhalten -
    momentan ist es so, das Seiten mit Unterseiten niemals als aktiv gekennzeichnet werden,
    weil du erst ACT definierst, danach aber ACTIFSUB einfach aus IFSUB kopierst,
    ohne die entsprechend aktiv-Klasse zu vergeben.

    Wenn deine zweite Ebene identisch zur ersten sein soll,
    wäre es am sinnvollsten, sie einfach als Kopie zu erstellen, also
    2 < .1
    2.wrap = <ul class="zweite"> | </ul>
    Dann hat diese Ebene auch alle Menüzustände wie die erste Ebene,
    momentan gibt es da ja nur NO


  • toifel toifel
    Jedi-Ratsmitglied
    0 x
    831 Beiträge
    96 Hilfreiche Beiträge
    15. 10. 2014, 16:25

    Mit der Zeile "ACT < .NO" erreichst du erst einmal nur eine 1:1 Kopie des Normalzustands, der aktive Link wird also genau so gerendert, wie die normalen/inaktiven.

    Ergänze darunter mal die Zeile
    ACT.wrapItemAndSub = <li class="active">|</li>

    So bekommt der aktive Menüeintrag eine eigene Klasse, die dann über CSS gestyled werden kann.

  • 0 x
    8 Beiträge
    0 Hilfreiche Beiträge
    15. 10. 2014, 19:26

    Eine Kopie des Zustandes der ersten Eben möchte ich ja. Es soll sowohl die erste Ebene als auch die zweite Ebene markiert sein.
    So?

    MENUE = HMENU
    MENUE {
    1 = TMENU
    1 {
    wrap = <ul>|</ul>
    noBlur = 1
    NO = 1
    NO {
    wrapItemAndSub = <li> | </li>
    linkWrap = &nbsp;|&nbsp;&#124;|*|&nbsp;|&nbsp;&#124;|*|&nbsp;|
    ATagBeforeWrap = 1
    }
    IFSUB = 1
    IFSUB {
    wrapItemAndSub = <li> | </li>
    linkWrap = &nbsp;|&nbsp;&#124;|*|&nbsp;|&nbsp;&#124;|*|&nbsp;|
    ATagBeforeWrap = 1
    }
    ACT < .NO
    ACT.wrapItemAndSub = <li class="active">|</li>

    ACT = 1
    ACTIFSUB < .IFSUB
    }
    2 = TMENU
    2 {
    wrap = <ul class="zweite"> | </ul>
    noBlur = 1
    NO = 1
    NO {
    wrapItemAndSub = <li> | </li>
    linkWrap = &nbsp;|&nbsp;&#124;|*|&nbsp;|&nbsp;&#124;|*|&nbsp;|
    ATagBeforeWrap = 1
    }
    }

    Das zusätzliche css

    #active {
    color:black;
    text-decoration:none;
    background-color:white;
    }

    Das klappt nicht. Was mache ich falsch? Vielen Dank.

  • jenses jenses
    Flash Gordon
    0 x
    3087 Beiträge
    106 Hilfreiche Beiträge
    16. 10. 2014, 09:43

    Du solltest dich noch mal mit dem Konzept der verschiedenen Zustände der menu items befassen,
    und in deinem TS die richtige Reihenfolge einhalten -
    momentan ist es so, das Seiten mit Unterseiten niemals als aktiv gekennzeichnet werden,
    weil du erst ACT definierst, danach aber ACTIFSUB einfach aus IFSUB kopierst,
    ohne die entsprechend aktiv-Klasse zu vergeben.

    Wenn deine zweite Ebene identisch zur ersten sein soll,
    wäre es am sinnvollsten, sie einfach als Kopie zu erstellen, also
    2 < .1
    2.wrap = <ul class="zweite"> | </ul>
    Dann hat diese Ebene auch alle Menüzustände wie die erste Ebene,
    momentan gibt es da ja nur NO

  • 0 x
    8 Beiträge
    0 Hilfreiche Beiträge
    16. 10. 2014, 12:00

    Ich fürchte ich versteh es nicht.
    Ich habe den entsprechenden Teil im TS sporadisch angepasst wie folgt:

    // ACT < .NO
    ACT.wrapItemAndSub = <li class="active">|</li>
    ACTIFSUB < .ACT
    // ACT = 1
    // ACTIFSUB < .IFSUB

    Das klappt nicht. Ich steh echt auf dem Schlauch. Wie muss es denn aussehen?
    Danke

  • 0 x
    8 Beiträge
    0 Hilfreiche Beiträge
    20. 10. 2014, 14:37

    Keiner da, der mir helfen kann?
    Ich versteh es einfach nicht.
    Ich habe jetzt folgendes:

    1. MENUE = HMENU
    2. MENUE {
    3. 1 = TMENU
    4. 1 {
    5. wrap = <ul>|</ul>
    6. noBlur = 1
    7. NO = 1
    8. NO {
    9. wrapItemAndSub = <li> | </li>
    10. linkWrap = &nbsp;|&nbsp;&#124;|*|&nbsp;|&nbsp;&#124;|*|&nbsp;|
    11. ATagBeforeWrap = 1
    12. }

    Hier definiere ich meines Wissens nach den Normalzustand.

    1. ACT = 1
    2. ACT {
    3. wrapItemAndSub = <li class="aktiv"> | </li>
    4. linkWrap = &nbsp;|&nbsp;&#124;|*|&nbsp;|&nbsp;&#124;|*|&nbsp;|
    5. ATagBeforeWrap = 1
    6. }

    Hier definiere ich doch jetzt, dass die aktiven Seite der Klasse "aktive" zugehören oder nicht?

    1. IFSUB = 1
    2. wrapItemAndSub = <li> | </li>
    3. linkWrap = &nbsp;|&nbsp;&#124;|*|&nbsp;|&nbsp;&#124;|*|&nbsp;|
    4. ATagBeforeWrap = 1
    5. }

    Hier definiere ich den Zustand von Seiten mit Unterseiten oder?

    1. wrapItemAndSub = <li class="aktiv"> | </li>
    2. linkWrap = &nbsp;|&nbsp;&#124;|*|&nbsp;|&nbsp;&#124;|*|&nbsp;|
    3. ATagBeforeWrap = 1
    4. }
    5.  
    6. }

    und hier definiere ich den aktiven Zustand von Seiten mit Unterseiten, oder nicht?

    1. 2<.1
    2. 2 = TMENU
    3. 2 {
    4. wrap = <ul class="zweite"> | </ul>
    5. noBlur = 1
    6. }
    7. }

    Hier kopiere ich die Zustände in die zweite Ebene und setze zusätzlich in der zweiten Ebene die Klasse "zweite" ein, richtig?
    Leider werden wohl nicht alle </li> gesetzt. Aber warum? Jemand ne Idee?
    Hier der Quellcode der Seite:

    1. <div id="menue">
    2. <ul>
    3. <li class="aktiv">
    4. <a href="index.php?id=12" >
    5. 1
    6. </a>
    7. <ul class="zweite">
    8. <li class="aktiv">
    9. <a href="index.php?id=12" >
    10. 1.1
    11. </a>
    12. </li>
    13. <li>
    14. <a href="index.php?id=5" >
    15. 1.2
    16. </a>
    17. </li>
    18. </ul>
    19. </li>
    20. <li>
    21. <a href="index.php?id=7" >
    22. 2
    23. </a>
    24. </li>
    25. <li>
    26. <a href="index.php?id=4" >
    27. 3
    28. </a>
    29. </li>
    30. <li>
    31. <a href="index.php?id=15" >
    32. 4
    33. </a>
    34. </li>
    35. </ul>
    36. </div>

  • Chrissli Chrissli
    Jedi-General
    0 x
    1016 Beiträge
    28 Hilfreiche Beiträge
    20. 10. 2014, 17:57

    Wieso? Sind doch alle da?
    Vergiss nicht, dass die 2. Ebene als Liste in der Liste erscheint. Dann rück' deinen Code einfach mal sauber ein, dass hat schon so manches mal geholfen...

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

  • 0 x
    8 Beiträge
    0 Hilfreiche Beiträge
    21. 10. 2014, 09:13

    Aber was läuft dann schief?
    Warum werden mir die aktiven Seiten nicht markiert???

  • jenses jenses
    Flash Gordon
    0 x
    3087 Beiträge
    106 Hilfreiche Beiträge
    21. 10. 2014, 09:48

    Was meinst du denn eigentlich mit "Warum werden mir die aktiven Seiten nicht markiert???"?
    Laut deinem vorigen Post werden die aktiven Menüpunkte im HTML mit der Klasse aktiv gekennzeichnet,
    das ist doch, was du erreichen wolltest?

    Man sieht davon nichts im Browser?
    Vielleicht solltest du die Klasse .aktiv per CSS anders stylen als die normalen Listeneinträge...

  • 0 x
    8 Beiträge
    0 Hilfreiche Beiträge
    21. 10. 2014, 10:33

    Großartig.
    Ich habe zwar soweit alles richtig im css eingetragen was das Format angeht aber habe das Element nicht als Klasse definiert sondern mit einer #...
    Jetzt mit einem . davor klappt alles wie es sollte.
    Menü kann ich nun abhaken.
    Vielen Dank für die Hilfe von einem Neuling, so macht es dann auch Spaß sich in typo3 einzuarbeiten.