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.
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