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... 🙁
page.headerData.9876 >
temp.nav = COA
temp.nav.10 < plugin.freeCssDropDownMenu.horizontal
temp.nav.10.1.wrap = <ul class="dropdown dropdown-linear dropdown-columnar"> | </ul>
temp.nav.10.1.IFSUB.doNotLinkIt = 0
temp.nav.10.1.expAll = 1
temp.nav.10.2.IFSUB.doNotLinkIt = 1
temp.nav.10.2.entryLevel = 1
temp.nav.10.2.expAll = 1
temp.nav.10.4 >
temp.nav.10.5 >
page.10.subparts.main_nav < temp.nav
page.headerData.1000 = TEXT
page.headerData.1000.value (
<link href="fileadmin/template/css/dropdown.css" rel="stylesheet" type="text/css" />
<link href="fileadmin/template/css/dropdown.linear.columnar.css" rel="stylesheet" type="text/css" />
<link href="fileadmin/template/css/default.advanced.css" rel="stylesheet" type="text/css" />
<link href="fileadmin/template/css/default.css" rel="stylesheet" type="text/css" />
)
Versteh echt nicht was ich die ganze Zeit falsch mache und warum es bei den anderen sofort geklappt hat.
jank schrieb
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.
die default.css ist entweder vor der default.advanced.css oder gar nicht einzubinden.
Aber leider bringt auch das gar keinen Unterschied, weder davor noch gar nicht..
page.headerData.9876 >
temp.nav = COA
temp.nav.10 < plugin.freeCssDropDownMenu.horizontal
temp.nav.10.1.wrap = <ul class="dropdown dropdown-linear dropdown-columnar"> | </ul>
temp.nav.10.1.IFSUB.doNotLinkIt = 0
temp.nav.10.1.expAll = 1
temp.nav.10.2.IFSUB.doNotLinkIt = 1
temp.nav.10.2.entryLevel = 1
temp.nav.10.2.expAll = 1
temp.nav.10.4 >
temp.nav.10.5 >
page.10.subparts.main_nav < temp.nav
page.headerData.1000 = TEXT
page.headerData.1000.value (
<link href="fileadmin/template/css/dropdown.css" rel="stylesheet" type="text/css" />
<link href="fileadmin/template/css/dropdown.linear.columnar.css" rel="stylesheet" type="text/css" />
<link href="fileadmin/template/css/default.css" rel="stylesheet" type="text/css" />
<link href="fileadmin/template/css/default.advanced.css" rel="stylesheet" type="text/css" />
)
Liegt es vllt an meinen Seiten/Ebenen? Bis jetzt gibt es unterhalb von "Home" 3 Unterebenen..
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 http://www.lwis.net/free-css-drop-down-menu/dropdown.lwis.celebrity.horizontal.html 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
Hallo Dennis,
Versuch mal bitte folgendes:
Ich habe alle CSS Files wie folgt included:
Setup:
page.headerData.10 = TEXT
page.headerData.10.value (
<link rel="stylesheet" type="text/css" href="fileadmin/dropdown.css" media="all" />
<link rel="stylesheet" type="text/css" href="fileadmin/dropdown.linear.columnar.css" media="all" />
<link rel="stylesheet" type="text/css" href="fileadmin/default.advanced.css" media="all" />
<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)
)
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:
plugin.freeCssDropDownMenu.themeCss = fileadmin/dropdown.css
plugin.freeCssDropDownMenu.themeCss = fileadmin/dropdown.linear.columnar.css
plugin.freeCssDropDownMenu.themeCss = fileadmin/default.advanced.css
plugin.freeCssDropDownMenu.page = page
plugin.freeCssDropDownMenu.headerDataId = 10 </--ist nicht die 9876 bei mir
plugin.freeCssDropDownMenu.horizontal = 1
plugin.freeCssDropDownMenu.horizontal.start = 1
plugin.freeCssDropDownMenu.horizontal.exclude =
plugin.freeCssDropDownMenu.vertical = 0
plugin.freeCssDropDownMenu.vertical.start = 1
plugin.freeCssDropDownMenu.vertical.exclude =
Hoffe die Lösung hilft. Wenn nicht sag bescheid.
Ciao
Mac
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
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.
[browser = msie] AND [version = <7.0]
{$plugin.freeCssDropDownMenu.page}.headerData.{$plugin.freeCssDropDownMenu.headerDataId}.90 = TEXT
{$plugin.freeCssDropDownMenu.page}.headerData.{$plugin.freeCssDropDownMenu.headerDataId}.90.value (
<script type="text/javascript" src="typo3conf/ext/freecssdropdownmenu/res/js/jquery/jquery.js"></script>
<script type="text/javascript" src="typo3conf/ext/freecssdropdownmenu/res/js/jquery/jquery.dropdown.js"></script>
)
[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.
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.
temp.testnav = COA
# in subpart kopieren
temp.testnav.10 < plugin.freeCssDropDownMenu.horizontal
temp.testnav.10.special = list
temp.testnav.10.special.value = 2, 7, 8, 9, 10
# css class hinzufügen
temp.testnav.10.1.wrap = <ul class="dropdown dropdown-linear dropdown-columnar"> | </ul>
# 2. Level nicht verlinken wenn es unterseiten gibt
temp.testnav.10.2.IFSUB.doNotLinkIt = 1
#temp.testnav.10.2.1 = HTML
#temp.testnav.10.2.1.value = <div id="testnav"><img src="/xxx/xxx/xxx/xxx/img/logo_footer.png"></div>
#page.10.subparts.nav.3.wrap = <div id="testnav">|</div>
# 4. und 5. Menüebene löschen sonst zerreist es das menü...
temp.testnav.10.4 >
temp.testnav.10.5 >
#temp.testnav.20 = HTML
#temp.testnav.20.value = <div id="testnav"><img src="/xxx/xxx/files/xxx/logo_footer.png"></div>
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
Ich bin momentan im Urlaub und kann erst wieder nächstes Wochenende danach schauen.
Falls ich es vergesse bitte nochmal schreiben.
Moin jank,
vielen Dank schon mal! Und einen schönen Urlaub!
Bis dahin,
Dennis
Hallo Dennis,
ich habe mir deinen Beitrag nun in Ruhe durchlesen können.
Man kann aus einem Menülevel nicht einfach ein COA "machen".
Du kannst ein Menü in ein COA einfügen wie du es ja machst. Aber temp.testnav.10 bleibt dadurch immernoch ein HMENU und bringt auch nur die Eigenschaften vom HMENU>TMENU>TMENUITEM mit.
Die TSREF hilft dabei zu schauen was überhaupt für Eigenschaften für ein Element verfügbar sind.
TSREF TMENUITEM
So damit genug geklugschei... :o
Ich würde das ganze über CSS lösen.
indem du jedem li element als zusätzliche class die PID mit gibst. dadurch kannst du jeden Menüpunkt anders stylen und auch ein Bild als Hintergrund verwenden. Wenn das Bild auch ein link sein soll geht das natürlich nicht...
temp.testnav.10.1.NO.wrapItemAndSub = |*| <li class="{field:uid}"> | </li> |*| <li class="{field:uid} last"> | </li>
temp.testnav.10.1.NO.wrapItemAndSub.insertData = 1
.3{
background-image: url(/fileadmin/template/img/m-footer.jpg)
background-repeat: no-repeat;
background-position: bottom;
padding-bottom: 30px; /*Bindhöhe als padding hinzufügen*/
}
Wenn das Bild ein Link sein soll, kann das mit befor/after gelöst werden... ein beispiel hierzu überleg ich wenn es sein muss 😉
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:
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!
Genau das war mein Gedanke.
Dadurch bekommt jeder Menü Eintrag eine CSS class entsprechend der Seiten ID.
Ich habe das TS bei mir ausprobiert wiki.t3easy.de. da hat das soweit geklappt (zwar bei einem anderen Menü aber das Prinzip ist das selbe).
Das TS muss nach dem
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?
hab gerade noch etwas gefunden...
du musst auch noch den Menüzustand IFSUB ändern; hab ich übersehen 😉
temp.testnav.10.1.NO.wrapItemAndSub = |*| <li class="{field:uid}"> | </li> |*| <li class="{field:uid} last"> | </li>
temp.testnav.10.1.NO.wrapItemAndSub.insertData = 1
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.
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
.
danke @ etux
Das wuste ich auch noch nicht hab es aber glaube ich auch noch nie exkt so versucht.
temp.testnav = COA
temp.testnav.10 < plugin.freeCssDropDownMenu.horizontal
temp.testnav.10.1.NO.wrapItemAndSub = |*| <li class="id{field:uid}"> | </li> |*| <li class="id{field:uid} last"> | </li>
temp.testnav.10.1.NO.wrapItemAndSub.insertData = 1
temp.testnav.10.1.IFSUB.wrapItemAndSub = |*| <li class="id{field:uid} dir"> | </li> |*| <li class="id{field:uid} dir last"> | </li>
.id3{
background-image: url(/fileadmin/template/img/m-footer.jpg)
background-repeat: no-repeat;
background-position: bottom;
padding-bottom: 30px; /*Bindhöhe als padding hinzufügen*/
}
.idX{
....
}
OK, hab die Zeilen mal hinzugefügt:
temp.testnav = COA
temp.testnav.10 < plugin.freeCssDropDownMenu.horizontal
temp.testnav.10.special = list
temp.testnav.10.special.value = 2, 7, 8, 9, 10
temp.testnav.10.1.wrap = <ul class="dropdown dropdown-linear dropdown-columnar"> | </ul>
temp.testnav.10.1.NO.wrapItemAndSub = |*| <li class="id{field:uid}"> | </li> |*| <li class="id{field:uid} last"> | </li>
temp.testnav.10.1.NO.wrapItemAndSub.insertData = 1
temp.testnav.10.1.IFSUB.wrapItemAndSub = |*| <li class="id{field:uid} dir"> | </li> |*| <li class="id{field:uid} dir last"> | </li>
temp.testnav.10.2.IFSUB.doNotLinkIt = 1
temp.testnav.10.4 >
temp.testnav.10.5 >
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?
temp.testnav.10.2.NO.wrapItemAndSub = |*| <li class="id{field:uid}"> | </li> |*| <li class="id{field:uid} last"> | </li>
temp.testnav.10.2.NO.wrapItemAndSub.insertData = 1
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.
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 http://www.lwis.net/free-css-drop-down-menu/dropdown.lwis.celebrity.horizontal.html 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
<li class="id{field:uid} dir">
vorkommt.
Das soll eigentlich durch das
insertData = 1
in die jeweilige pid/uid geändert werden.
Kannst du noch einen link auf die Seite schreiben?
warum verwerdest du
temp.testnav.10.special = list
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?!
temp.testnav.10.special = directory
temp.testnav.10.special.value = (PID vom Elternteil)
nimmt die unterseiten mit...
Also wenn ich es für die 2. Ebene definiere, also so:
temp.testnav.10.2.NO.wrapItemAndSub = |*| <li class="id{field:uid}"> | </li> |*| <li class="id{field:uid} last"> | </li>
temp.testnav.10.2.NO.wrapItemAndSub.insertData = 1
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
Wenn ich die Seite auf mach bekomm ich immernoch klassen ala id{field:uid}.
Hast du den cache aktiviert beim entwickeln??? wenn ja, schalt den beim entwickeln am besten ab...
config.no_cache = 1
Irgendwo wird beim kopieren das insertData verschluckt/überschrieben..
brauchst du das COA um das Menü herum?
Daran wird es zwar nicht liegen jedoch kann man das "säubern".
Du kannst auch mal in den Typoscript-Object-Browser drüber schauen... vielleicht sieht man da schon den Fehler...
Das Menü sollte im Object Browser etwa so wie im Anhang.
