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
    03. 02. 2011, 14:31

    Erstmal vielen Dank für Deine Geduld! :)

    Trotzdem verzweifel ich langsam. Die CSS Dateien werden nun richtig eingebunden, trotzdem sieht das menü genauso aus wie vorher auch... :(

    1. page.headerData.9876 >
    2.  
    3. temp.nav = COA
    4. temp.nav.10 < plugin.freeCssDropDownMenu.horizontal
    5. temp.nav.10.1.wrap = <ul class="dropdown dropdown-linear dropdown-columnar"> | </ul>
    6. temp.nav.10.1.IFSUB.doNotLinkIt = 0
    7. temp.nav.10.1.expAll = 1
    8. temp.nav.10.2.IFSUB.doNotLinkIt = 1
    9. temp.nav.10.2.entryLevel = 1
    10. temp.nav.10.2.expAll = 1
    11. temp.nav.10.4 >
    12. temp.nav.10.5 >
    13. page.10.subparts.main_nav < temp.nav
    14.  
    15. page.headerData.1000 = TEXT
    16. page.headerData.1000.value (
    17. <link href="fileadmin/template/css/dropdown.css" rel="stylesheet" type="text/css" />
    18. <link href="fileadmin/template/css/dropdown.linear.columnar.css" rel="stylesheet" type="text/css" />
    19. <link href="fileadmin/template/css/default.advanced.css" rel="stylesheet" type="text/css" />
    20. <link href="fileadmin/template/css/default.css" rel="stylesheet" type="text/css" />
    21. )

    Versteh echt nicht was ich die ganze Zeit falsch mache und warum es bei den anderen sofort geklappt hat.

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

    [quote="jank"]
    Das Problem ist die Reihenfolge der CSS Dateien.

    Die Dateien überschreiben der Reihe nach einige Einstellungen und wenn die Reihenfolge falsch ist überschreibt die letzte Datei die Einstellungen der vorherigen.

    Hier die Reihenfolge:
    dropdown.css
    dropdown.linear.columnar.css
    default.advanced.css

    Und das Theme css unbedingt nach fileadmin kopieren, da es sonst bei einem Update überschrieben wird.

    [/quote]

    die default.css ist entweder vor der default.advanced.css oder gar nicht einzubinden.

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

    Aber leider bringt auch das gar keinen Unterschied, weder davor noch gar nicht..

    1. page.headerData.9876 >
    2.  
    3. temp.nav = COA
    4. temp.nav.10 < plugin.freeCssDropDownMenu.horizontal
    5. temp.nav.10.1.wrap = <ul class="dropdown dropdown-linear dropdown-columnar"> | </ul>
    6. temp.nav.10.1.IFSUB.doNotLinkIt = 0
    7. temp.nav.10.1.expAll = 1
    8. temp.nav.10.2.IFSUB.doNotLinkIt = 1
    9. temp.nav.10.2.entryLevel = 1
    10. temp.nav.10.2.expAll = 1
    11. temp.nav.10.4 >
    12. temp.nav.10.5 >
    13. page.10.subparts.main_nav < temp.nav
    14.  
    15. page.headerData.1000 = TEXT
    16. page.headerData.1000.value (
    17. <link href="fileadmin/template/css/dropdown.css" rel="stylesheet" type="text/css" />
    18. <link href="fileadmin/template/css/dropdown.linear.columnar.css" rel="stylesheet" type="text/css" />
    19. <link href="fileadmin/template/css/default.css" rel="stylesheet" type="text/css" />
    20. <link href="fileadmin/template/css/default.advanced.css" rel="stylesheet" type="text/css" />
    21. )

    Liegt es vllt an meinen Seiten/Ebenen? Bis jetzt gibt es unterhalb von "Home" 3 Unterebenen..

  • jank jank
    Sternenflotten-Admiral
    0 x
    158 Beiträge
    0 Hilfreiche Beiträge
    03. 02. 2011, 20:39

    Hallo Dennis, ich seh gerade mit firebug, das die default.css da die breite vom "ul.dropdown ul" vorgibt.
    Da seh ich gerade die dropdown.linear.css fehlt bei dir ganz... die wird, wenn sie im gleichen verzeichnis liegt sonst durch import automatisch geladen.

    Unter [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] ist ne Demo bei der du dir den Quelltext anschauen kannst.

    und du kannst die dropdown.linear.css, dropdown.linear.columnar.css und default.advanced.css eigentlich im extension verzeichnis lassen. Nur deine Theme CSS sollte ins fileadmin.

    Ich glaube ich muss mir demnächst mal die Zeit nehmen das als standard menü einzubauen... Das Menü ist anscheinend gerade im Trend

  • MacBookPro MacBookPr...
    TYPO3-Anwärter
    0 x
    4 Beiträge
    0 Hilfreiche Beiträge
    23. 03. 2011, 15:05

    Hallo Dennis,

    Versuch mal bitte folgendes:

    Ich habe alle CSS Files wie folgt included:

    Setup:

    1. page.headerData.10 = TEXT
    2. page.headerData.10.value (
    3. <link rel="stylesheet" type="text/css" href="fileadmin/dropdown.css" media="all" />
    4. <link rel="stylesheet" type="text/css" href="fileadmin/dropdown.linear.columnar.css" media="all" />
    5. <link rel="stylesheet" type="text/css" href="fileadmin/default.advanced.css" media="all" />
    6. <link rel="stylesheet" type="text/css" href="fileadmin/global.css" media="screen" /> <!--ist meine CSS und enthält keine Infos für die Extention vom DropDownmenu)
    7. )

    Unter Fileadmin habe ich folgende Files abgelegt und da war bei mir der Fehler:
    default.css
    default.advanced.css
    dropdown.css
    dropdown.linear.columnar.css
    dropdown.linear.css <-- UND DIE WAR DER GRUND; warum es nicht ging)

    Die dropdown.linear.columnar bezieht sich auf die dropdown.linear.css und sollte daher im selben Ordner sein-

    Noch meine Constants:

    1. plugin.freeCssDropDownMenu.themeCss = fileadmin/dropdown.css
    2. plugin.freeCssDropDownMenu.themeCss = fileadmin/dropdown.linear.columnar.css
    3. plugin.freeCssDropDownMenu.themeCss = fileadmin/default.advanced.css
    4. plugin.freeCssDropDownMenu.page = page
    5. plugin.freeCssDropDownMenu.headerDataId = 10 </--ist nicht die 9876 bei mir
    6. plugin.freeCssDropDownMenu.horizontal = 1
    7. plugin.freeCssDropDownMenu.horizontal.start = 1
    8. plugin.freeCssDropDownMenu.horizontal.exclude =
    9. plugin.freeCssDropDownMenu.vertical = 0
    10. plugin.freeCssDropDownMenu.vertical.start = 1
    11. plugin.freeCssDropDownMenu.vertical.exclude =

    Hoffe die Lösung hilft. Wenn nicht sag bescheid.

    Ciao
    Mac

  • jank jank
    Sternenflotten-Admiral
    0 x
    158 Beiträge
    0 Hilfreiche Beiträge
    23. 03. 2011, 15:51

    ich verwende auch nur die 9876 als default, weil ich die noch nirgends gefunden habe und sie wahrscheinlich niemand sonst händisch im Einsatz hat.

    Nun zum Rest
    Was mich an deinen constants wundert, ist, dass du die Variable

    1. plugin.freeCssDropDownMenu.themeCss

    3 mal überschreibst.
    Am Schluss hat sie dann den Wert "fileadmin/default.advanced.css"

    Die Variable ist rein für das theme gedacht, also die Einstellungen die nicht Funktionell sind, wie Farbe usw.
    Die funktionellen CSS Dateien werden durch "horizontal = 1" eingebunden.

    Wichtig für ältere Browser (z.B. ie6) ist jquery und das zugehörige script, welches bei dir wahrscheinlich nicht mehr geladen wird, da du headerData mit einem cObject "TEXT" überschreibst. das ganze war eigentlich ein COA um beim ie < v7 jquery über conditions zu landen.

    1. [browser = msie] AND [version = <7.0]
    2. {$plugin.freeCssDropDownMenu.page}.headerData.{$plugin.freeCssDropDownMenu.headerDataId}.90 = TEXT
    3. {$plugin.freeCssDropDownMenu.page}.headerData.{$plugin.freeCssDropDownMenu.headerDataId}.90.value (
    4. <script type="text/javascript" src="typo3conf/ext/freecssdropdownmenu/res/js/jquery/jquery.js"></script>
    5. <script type="text/javascript" src="typo3conf/ext/freecssdropdownmenu/res/js/jquery/jquery.dropdown.js"></script>
    6. )
    7. [end]

    PS:
    Sorry, ich komme nicht zum lesen der privaten Nachrichten... und bin eigentlich auch eher für die Veröffentlichung im Forum damit auch andere etwas davon haben.

  • Dennis.D Dennis.D
    Padawan
    0 x
    47 Beiträge
    0 Hilfreiche Beiträge
    27. 04. 2011, 11:31

    Hallo jank,

    ich habe es mittlerweile hinbekommen dein Menü einzubauen! Vielen Dank noch mal dafür! Das sieht soweit schon recht gut aus.
    Die Anforderung ist jetzt jedoch immer noch das Menü mit einem Bild zu erweitern und alle meine Versuche scheiterten bis jetzt kläglich.

    So in der Art soll es nachher aussehen: http://www.clinique.de/
    Also erst die mehrspaltige Navigation und darunter noch ein Container in dem ich ein Bild platzieren kann.
    Kannst Du mir vllt irgendwie auf die Sprünge helfen wie man das umsetzen könnte?
    Hatte an ein COA gedacht welches nach der Navi eingebunden wird und einen <div> Container drumherum wrappt.

    1. temp.testnav = COA
    2. # in subpart kopieren
    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. # css class hinzufügen
    9. temp.testnav.10.1.wrap = <ul class="dropdown dropdown-linear dropdown-columnar"> | </ul>
    10.  
    11. # 2. Level nicht verlinken wenn es unterseiten gibt
    12. temp.testnav.10.2.IFSUB.doNotLinkIt = 1
    13. #temp.testnav.10.2.1 = HTML
    14. #temp.testnav.10.2.1.value = <div id="testnav"><img src="/xxx/xxx/xxx/xxx/img/logo_footer.png"></div>
    15. #page.10.subparts.nav.3.wrap = <div id="testnav">|</div>
    16.  
    17. # 4. und 5. Menüebene löschen sonst zerreist es das menü...
    18. temp.testnav.10.4 >
    19. temp.testnav.10.5 >
    20.  
    21. #temp.testnav.20 = HTML
    22. #temp.testnav.20.value = <div id="testnav"><img src="/xxx/xxx/files/xxx/logo_footer.png"></div>
    23.  
    24. page.10.subparts.nav < temp.testnav

    Aber dieser Container wird nicht innerhalb der Navigation eingebunden.
    Nicht nur ich wäre über jeden Hinweis dankbar!

    Beste Grüße
    Dennis

  • jank jank
    Sternenflotten-Admiral
    0 x
    158 Beiträge
    0 Hilfreiche Beiträge
    27. 04. 2011, 12:42

    Ich bin momentan im Urlaub und kann erst wieder nächstes Wochenende danach schauen.
    Falls ich es vergesse bitte nochmal schreiben.

  • Dennis.D Dennis.D
    Padawan
    0 x
    47 Beiträge
    0 Hilfreiche Beiträge
    28. 04. 2011, 09:45

    Moin jank,

    vielen Dank schon mal! Und einen schönen Urlaub!

    Bis dahin,
    Dennis