Typoscript für Mega Dropdown Menu [Gelöst]

  • cwalter cwalter
    Padawan
    0 x
    51 Beiträge
    0 Hilfreiche Beiträge
    18. 01. 2010, 08:37

    Hallo zusammen

    Ich hab eine echte Knacknuss - zumindest für mich :). Ich bräuchte für ein mehrspaltiges Dropdown Menü folgenden generierten Code:

    [HTML]<ul id="topnav">
    <li><a href="#">Punkt 1</a></li>
    <li>
    <a href="#">Punkt 2</a>
    <div class="sub">
    <ul>
    <li><h2><a href="#">Unterpunkt 1</a></h2></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    </ul>
    <ul>
    <li><h2><a href="#">Unterpunkt 1</a></h2></li>
    <li><a href="#">Navigation Link</a></li>
    <li><a href="#">Navigation Link</a></li>
    </ul>
    </div>
    </li>
    <li><a href="#">Punkt 3</a></li>
    <li><a href="#">Punkt 4</a></li>
    <li><a href="#">Punkt 5</a></li>
    </ul>
    [/HTML]

    Allerdings bin ich mit dem hierzu notwendigen typoscript ziemlich überfordert, ich bin mir nicht einmal ganz im klaren, wie ich die einzelnen Seiten von der Hierarchie anordnen müsste, damit eine solche Struktur möglich ist (da die ersten Seiten jeder Unternavigationsgruppe jeweils noch als <h2> ausgezeichnet sein sollten). Gibt es vielleicht einen typoscript-Kenner, welcher sich ein entsprechendes TMENU vorstellen könnte?

    Grüsse
    Christoph


  • Dennis.D Dennis.D
    Padawan
    0 x
    47 Beiträge
    0 Hilfreiche Beiträge
    02. 05. 2011, 11:32

    Hallo jank,

    Du darfst gerne weiter "klugscheissen" ! :) Ich lerne und lerne...

    Wenn ich es richtig verstandenen habe möchtest Du eine weitere?! oder überhaupt eine Klasse um das <li> in der letzten Ebene wrappen. Im Moment steht ja dort nur <li></li> ohne Klasse.
    Dieser Klasse des <li> soll dynamisch die PID der Oberseite mitgegeben werden. Somit kann man diese über CSS, in Deinem Beispiel ".3" ansprechen?! Hab ich richtig verstanden, oder? :)

    Wenn ich Dein TS ausprobiere passiert leider gar nichts. Hab es auch mal in dieser Form ausprobiert:

    1. temp.testnav.10.1.NO.wrapItemAndSub = |*| <li class="testli"> | </li> |*| <li class="testli last"> | </li>

    Also ohne dynamische Übernahme einer PID. Auch da passiert leider nix.

    DANKE!

  • jank jank
    Sternenflotten-Admiral
    0 x
    158 Beiträge
    0 Hilfreiche Beiträge
    02. 05. 2011, 12:33

    Genau das war mein Gedanke.
    Dadurch bekommt jeder Menü Eintrag eine CSS class entsprechend der Seiten ID.

    Ich habe das TS bei mir ausprobiert [url=http://wiki.t3easy.de/]wiki.t3easy.de[/url]. da hat das soweit geklappt (zwar bei einem anderen Menü aber das Prinzip ist das selbe).
    Das TS muss nach dem

    1. temp.testnav.10 < plugin.freeCssDropDownMenu.horizontal

    eingefügt werden, da sonst die Eigenschaften wieder überschrieben werden.

    Kannst du einen Auszug aus dem TS schicken der das Menü betrifft?

  • jank jank
    Sternenflotten-Admiral
    0 x
    158 Beiträge
    0 Hilfreiche Beiträge
    02. 05. 2011, 12:56

    hab gerade noch etwas gefunden...
    du musst auch noch den Menüzustand IFSUB ändern; hab ich übersehen ;)

    1. temp.testnav.10.1.NO.wrapItemAndSub = |*| <li class="{field:uid}"> | </li> |*| <li class="{field:uid} last"> | </li>
    2. temp.testnav.10.1.NO.wrapItemAndSub.insertData = 1
    3. temp.testnav.10.1.IFSUB.wrapItemAndSub = |*| <li class="{field:uid} dir"> | </li> |*| <li class="{field:uid} dir last"> | </li>

    IFSUB ist eine Kopie von NO. Aber eben die Eigenschaft wrapItemAndSub wird überschrieben um die klasse dir hinzuzufügen.

  • etux etux
    Jedi-Meister
    0 x
    360 Beiträge
    13 Hilfreiche Beiträge
    02. 05. 2011, 13:15

    Denkt bloß daran, dass der Name des class-Attributes nicht mit einer Zahl anfangen, bzw. nicht nur aus Zahlen bestehen darf - ist invalide und wird von keinem Browser (außer IE) verstanden

    .

  • jank jank
    Sternenflotten-Admiral
    0 x
    158 Beiträge
    0 Hilfreiche Beiträge
    02. 05. 2011, 13:23

    danke @ etux
    Das wuste ich auch noch nicht hab es aber glaube ich auch noch nie exkt so versucht.

    1. temp.testnav = COA
    2. temp.testnav.10 < plugin.freeCssDropDownMenu.horizontal
    3. temp.testnav.10.1.NO.wrapItemAndSub = |*| <li class="id{field:uid}"> | </li> |*| <li class="id{field:uid} last"> | </li>
    4. temp.testnav.10.1.NO.wrapItemAndSub.insertData = 1
    5. temp.testnav.10.1.IFSUB.wrapItemAndSub = |*| <li class="id{field:uid} dir"> | </li> |*| <li class="id{field:uid} dir last"> | </li>

    1. .id3{
    2. background-image: url(/fileadmin/template/img/m-footer.jpg)
    3. background-repeat: no-repeat;
    4. background-position: bottom;
    5. padding-bottom: 30px; /*Bindhöhe als padding hinzufügen*/
    6. }
    7. .idX{
    8. ....
    9. }

  • Dennis.D Dennis.D
    Padawan
    0 x
    47 Beiträge
    0 Hilfreiche Beiträge
    02. 05. 2011, 14:12

    OK, hab die Zeilen mal hinzugefügt:

    1. temp.testnav = COA
    2.  
    3. temp.testnav.10 < plugin.freeCssDropDownMenu.horizontal
    4.  
    5. temp.testnav.10.special = list
    6. temp.testnav.10.special.value = 2, 7, 8, 9, 10
    7.  
    8. temp.testnav.10.1.wrap = <ul class="dropdown dropdown-linear dropdown-columnar"> | </ul>
    9. temp.testnav.10.1.NO.wrapItemAndSub = |*| <li class="id{field:uid}"> | </li> |*| <li class="id{field:uid} last"> | </li>
    10. temp.testnav.10.1.NO.wrapItemAndSub.insertData = 1
    11. temp.testnav.10.1.IFSUB.wrapItemAndSub = |*| <li class="id{field:uid} dir"> | </li> |*| <li class="id{field:uid} dir last"> | </li>
    12.  
    13.  
    14. temp.testnav.10.2.IFSUB.doNotLinkIt = 1
    15.  
    16. temp.testnav.10.4 >
    17. temp.testnav.10.5 >
    18.  
    19. page.10.subparts.nav < temp.testnav

    Nun steht im Quelltext folgendes:
    <ul class="dropdown dropdown-linear dropdown-columnar"><li class="id{field:uid} dir">....

    Da ich es nicht in der Ebene haben will, sondern in der 3. müsste das TS doch eigentlich so lauten oder?

    1. temp.testnav.10.2.NO.wrapItemAndSub = |*| <li class="id{field:uid}"> | </li> |*| <li class="id{field:uid} last"> | </li>
    2. temp.testnav.10.2.NO.wrapItemAndSub.insertData = 1
    3. temp.testnav.10.2.IFSUB.wrapItemAndSub = |*| <li class="id{field:uid} dir"> | </li> |*| <li class="id{field:uid} dir last"> | </li>

    Kann es sein dass ich das CSS nun einfach falsch anspreche?
    .id3 {...}
    "3" ist die ID der Oberseite.

  • jank jank
    Sternenflotten-Admiral
    0 x
    158 Beiträge
    0 Hilfreiche Beiträge
    02. 05. 2011, 14:57

    Die Level 2 und 3 sind eine Kopie von Level 1.
    Nur Änderungen werden neu deklariert.

    Deswegen würde ich es bei der erste Ebene definieren.
    Ob du die Klassen dort nutzt oder nicht ist ja egal.

    Du möchtest ja, wie in dem beispiel von [url=http://www.lwis.net/free-css-drop-down-menu/dropdown.lwis.celebrity.horizontal.html]http://www.lwis.net/free-css-drop-down-menu/dropdown.lwis.celebrity.horizontal.html[/url] ein Menü haben.
    CSS muss in dem Fall für die zweite Ebene getroffen werden, damit das Bild unter der Spalte zu sehen ist.

    MErkwürdig ist, das bei dir im HTML Quelltext

    1. <li class="id{field:uid} dir">
    vorkommt.
    Das soll eigentlich durch das
    in die jeweilige pid/uid geändert werden.

    Kannst du noch einen link auf die Seite schreiben?

  • jank jank
    Sternenflotten-Admiral
    0 x
    158 Beiträge
    0 Hilfreiche Beiträge
    02. 05. 2011, 15:05

    warum verwerdest du

    1. temp.testnav.10.special = list
    2. temp.testnav.10.special.value = 2, 7, 8, 9, 10

    Dadurch werden, dachte ich, kein ebenen erzeugt, sondern ein auf eine Ebene reduziertes menü der Seiten unter value?!

    1. temp.testnav.10.special = directory
    2. temp.testnav.10.special.value = (PID vom Elternteil)

    nimmt die unterseiten mit...

  • Dennis.D Dennis.D
    Padawan
    0 x
    47 Beiträge
    0 Hilfreiche Beiträge
    02. 05. 2011, 15:16

    Also wenn ich es für die 2. Ebene definiere, also so:

    1. temp.testnav.10.2.NO.wrapItemAndSub = |*| <li class="id{field:uid}"> | </li> |*| <li class="id{field:uid} last"> | </li>
    2. temp.testnav.10.2.NO.wrapItemAndSub.insertData = 1
    3. temp.testnav.10.2.IFSUB.wrapItemAndSub = |*| <li class="id{field:uid} dir"> | </li> |*| <li class="id{field:uid} dir last"> | </li>

    Dann steht die jeweilige id im Quelltext: <li class="id17">

    Hier mal der link zur Entwicklungsumgebung: http://bike.diekavallerie.de.www68.your-server.de/produkte.html