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.
bzw. die Richtigen klassen werden bei allen Menüpunkten außer bei "Produkte" eingesetzt.
Moin jank,
vielen Dank für Deine Geduld!
Warum die Klassen außer bei Produkten richtig gesetzt werden ist mir bis jetzt schleierhaft. Der Object Browser hilft mir da auch nicht weiter.
Unter Showroom: http://bike.diekavallerie.de.www68.your-server.de/e-showroom.html
wird nun zumindest mal ne Grafik angezeigt.. Aber diese soll sich nachher ja zwar innerhalb des Menü aber darunter befinden.. Mit padding oder margin komm ich da nicht weiter, die Grafik verschwindet dann aus der "Sichtweite"..
Meine Idee war ja am Anfang noch irgendwie ein weiteren <div> drum zu wrappen und den dann auszurichten. Total abwägig die Idee??
Ein div direkt innerhalb eines ul's ist meines Wissens nicht konform.
Außerdem weiß ich nicht wie sich das auf das restliche css auswirkt, da dann vermutlich die selectoren/klassen nicht mehr passen.
In Firebug sehe ich, dass alle Eigenschaften bis auf das padding angewendet werden. das padding wird von ul.dropdown li überschrieben.
Die Eigenschaft wird nicht angewendet, da die Datei in der Sie steht nicht als letztes sondern als 2. im header eingebunden wird. falls es nichts bringt die styles.css als letztes einzubinden würde ich es statt mit li.id11 mit
ul.dropdown li.id11 versuchen.
@ Dennis.D
Ein wenig Off-Topic:
An Deiner Stelle würde ich erst mal ein Schritt zurück gehen und mich um das Grund-Layout kümmern.
Dein Layout bricht nur deshalb nicht aus einander (zumindest rein optisch), weil Du massenhaft Hohen angibst. Hohen-Angaben haben aber bei Elementen, die Text enthalten, nichts zu suchen.
Lesestoff:
http://little-boxes.de/lb1/1-das-web-ist-nicht-aus-papier.html
Die leere Elementen, die Du für die runden Ecken benutzest, haben keine semantische Bedeutung und sind völlig überflüssig - Du hast genügend Elementen, die die Ecken-Grafiken aufnehmen können.
Du schließt (beendest) die Floats nicht ein. Daher ist Dein Layout instabil (eigentlich eher zerschossen). Und das kannst Du leicht sehen, indem Du alle Hohen-Angaben entfernst.
Lesestoff:
http://little-boxes.de/lb1/IV-css-positionierung.html
Deine Navigation habe ich mir nicht angesehen. Um da einzusteigen, müsste ich mir vielleicht mehrere Vorbeiträge anschauen und die TypoScript Konfiguration erst mal finden.
Leider habe ich die Zeit dafür nicht
.
Hallo etux,
vielen Dank für Deine Hinweise. Ich werde mir insbesondere den 2. link von Dir mal genauer ansehen.
Das Template wurde mir so geliefert, das habe nicht ich erstellt.
Grüße
Dennis
Hallo jank,
ich bin ein wenig weiter gekommen mit dem Menü. Hab aber immer noch zu kämpfen.. 🙁
Besonders die Sache mit den Bildern klappt noch gar nicht so wie ich mir das vorstelle.
http://bike.diekavallerie.de.www68.your-server.de/
Was ich grad nicht verstehe:
- wie bekomme ich für die Spalten eine feste Breite, so dass die Abstände zwischen den Spalten gleich breit sind und es zu keinem Umbruch bei den links kommt?
- die Unterseiten von "Produkte" "PG Bikes" sind etwas nach rechts eingerückt.
das kommt anscheinend von: ul.dropdown ul a aus der default.advanced.css. Komischerweise wrappt er bei dem letzten das "last" herum, obwohl ich es aus dem TypoScript mal entfernt habe?!
Besten Dank und Grüße
Dennis
Moin zusammen,
danke, dass es Leute gibt, die solche Ext. schreiben und dass auch noch darüber geschrieben wird.
Ich möchte mich garnicht lange aufhalten mit meinem Anliegen. Trotz der vielen gezeigten Beispiele bekomme ich das Menü nicht zum Laufen:
1. Die Extension habe ich bei den statischen Templates aufgenommen auf root-Ebene.
2. Die Konstanten habe ich auf root-Ebene hinzugefügt
plugin.freeCssDropDownMenu.themeCss = typo3conf/ext/freecssdropdownmenu/res/css/dropdown/themes/_template/default.css
plugin.freeCssDropDownMenu.page = page
plugin.freeCssDropDownMenu.headerDataId = 9876
plugin.freeCssDropDownMenu.horizontal = 1
plugin.freeCssDropDownMenu.horizontal.start = 2
plugin.freeCssDropDownMenu.horizontal.exclude =
plugin.freeCssDropDownMenu.vertical = 0
plugin.freeCssDropDownMenu.vertical.start = 1
plugin.freeCssDropDownMenu.vertical.exclude =
3. Die CSS-Dateien wurden in den Header gepackt.
page.headerData.9876 = TEXT
page.headerData.9876.value (
<link rel="stylesheet" type="text/css" href="fileadmin/templates/freecssdropdownmenu/dropdown.css" media="all" />
<link rel="stylesheet" type="text/css" href="fileadmin/templates/freecssdropdownmenu/dropdown.linear.columnar.css" media="all" />
<link rel="stylesheet" type="text/css" href="fileadmin/templates/freecssdropdownmenu/lwis.celebrity/default.advanced.css" media="all" />
)
4. Der Marker wird angesprochen.
page.20.marks {
NAVI_TOP < plugin.freeCssDropDownMenu.horizontal
NAVI_TOP {
special = directory
special.value = 2
}
Die CSS-Dateien werden richtig ausgegeben. Der Marker verschwindet auch im Quelltext, wird also angesprochen. Das Problem liegt für mein Verständnis bei der Versorgung des Markers.
Sieht jemand einen Fehler in meiner Durchführung? #paralyzed#
Grüße,
Martin
***EDIT***
Das Problem hat sich erledigt. Hatte den Marker weiter unten nochmals überschrieben, deshalb kam kein Resultat zu stande... #angry#
Moin jank,
ich habe dein Menü soweit zum Laufen bekommen, ging ziemlich gut.
Kann es sein, dass unter der aktuellen Version einige Darstellungsprobleme vorliegen bezüglich des Internet Explorer (getestet unter 8 und 9)?
Nur bei diesem werden die untergeordneten Ebenen nicht angezeigt. Bei den anderen Browsern kein Problem.
Habe das ganze mit einer völlig nackten Typo3 4.5.2 probiert.
Vielleicht hast Du ja einen Tip woran das liegen könnte..
Danke für die Ext auf jeden Fall.
Gruß,
Maddin
Bis jetzt kann ich keine Probleme, weder mit IE 8 noch IE 9 ausmachen. Vielleicht läuft der Browser im Kompatibilitätsmodus ausgelöst durch einen falschen Doctype.
Im IE < 7 wird z.B. Javascript benötigt (jquery library + jquery.dropdown.js) welches aber höhere IE Versionen notfalls auch nicht stört.
Vielleicht gibt es auch probleme mit dem Restlichen Quelltext. Hier rate ich immer wieder zum validieren.
Es ist schwer zu sagen woran es liegt, ohne wenigstens Einblick in den HTML/CSS Quelltext und vielleicht Auszüge aus dem aktuellen TS.
Du hast keine URL gepostet...
PS: Aktuell ist Typo3 4.5.3, daran wird es aber nicht liegen.
Moin jank,
der Hinweis mit dem Doctype war der entscheidende. Vielen Dank!
Läuft super, Dein Menü.
Gruß,
Maddin
Das Lob gebürt nicht mir. Das CSS und JS Framework ist von http://www.lwis.net/free-css-drop-down-menu/.
Ich habe nur ein bischen Typoscript beigesteuert!
Der Autor freut sich bestimmt auch über einen netten Kommentar oder eine Spende...
Hallo zusammen,
ich habe ebenfalls die Extension nach langem Hin und Her und Dank dieses Forum eingebunden bekommen.
Ich hab das Theme lwis.celebrity gewählt.
Und die Untermenüs werden auch angezeigt. Allerdings habe ich das Problem, dass in der eigentlichen Menüleiste auch Unterpunkte angezeigt werden.
Meine Struktur sieht so aus:
- Home (Ebene 1)
- Über uns (Ebene 1)
* Vorstand (Ebene 2)
* Chronik (ebene 2)
usw.
Aber die Menü-Leiste, die man sieht (ohne ein MouseOver) beinhaltet alle diese Elemente.
Also nicht nur "Home" und "Über uns", sondern auch die Unterpunkte "Vorstand" und "Chronik".
Wie kann ich das umstellen?
Mein Setup:
plugin.freeCssDropDownMenu.horizontal = HMENU
plugin.freeCssDropDownMenu.horizontal {
special = directory
special.value = 56,57,58,59,60,61
excludeUidList =
1 = TMENU
1 {
wrap = <ul class="dropdown dropdown-linear dropdown-columnar"> | </ul>
expAll = 1
noBlur = 1
NO = 1
NO {
ATagTitle.field = abstract // description // subtitle // title
wrapItemAndSub = |*| <li> | </li> |*| <li class="last"> | </li>
stdWrap.htmlSpecialChars = 1
}
IFSUB < .NO
IFSUB {
wrapItemAndSub = |*| <li class="dir"> | </li> |*| <li class="dir last"> | </li>
}
}
#2 < .1
#2.wrap = <ul> | </ul>
#3 < .2
#4 < .2
#5 < .2
}
# Default PAGE object:
page = PAGE
page {
includeCSS.file001 = fileadmin/templates/tvz/css/tvz-template.css
#includeCSS.file002 = typo3conf/ext/freecssdropdownmenu/res/css/dropdown/dropdown.css
#includeCSS.file003 = typo3conf/ext/freecssdropdownmenu/res/css/dropdown/dropdown.vertical.css
#includeCSS.file004 = typo3conf/ext/freecssdropdownmenu/res/css/dropdown.linear.columnar.css
includeCSS.file005 = fileadmin/templates/megadropdown/default.advanced.css
#includeJS.file011 = typo3conf/ext/freecssdropdownmenu/res/js/jquery/jquery.dropdown.js
#includeJS.file012 = typo3conf/ext/freecssdropdownmenu/res/js/jquery/jquery.js
}
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/templates/tvz/tvz-template.html
workOnSubpart = DOCUMENT
subparts {
MENU_TOP < plugin.freeCssDropDownMenu.horizontal
}
marks {
MENU_LEFT < plugin.freeCssDropDownMenu.horizontal
MAIN_CONTENT < styles.content.get
}
}
Und als Konstanten nur:
plugin.freeCssDropDownMenu.themeCss = fileadmin\templates\megadropdown\default.advanced.css