Navigation Template anpassen

Hallo zusammen,

habe ein Problem wegen mangelnder PHP-Kenntnisse mit der Anpassung des Standard Navigation-Templates.
Und zwar möchte ich zwischen den einzelnen Navigations-Elementen jeweils eine Grafik einsetzen. Am Anfang ist eine andere Grafik als zwischen den einzelnen Items und am Ende soll ebenfalls eine andere Grafik platziert werden. Das funktioniert auch fast ohne Probleme. Ich bekomme es nur nicht hin, dass am Ende die andere Grafik angezeigt wird, denn dazu fehlen mir schlichtweg die PHP-Kenntnisse.

Mein modifiziertes Template-Skript sieht wie folgt aus:

PHP-Code:

<ul class="<?php echo $this->level; ?>"> <img src="files/Bilder/menu-backgr-links.png"> <?php foreach ($this->items as $item): ?> <?php if ($item['isActive']): ?> <li class="<?php echo $item['class']; ?>"><span class="<?php echo $item['class']; ?>"><?php echo $item['link']; ?></span><?php echo $item['subitems']; ?></li> <img src="files/Bilder/menu-backgr-beides.png"> <?php else: ?> <li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li> <?php if ($item['isLast']): ?> <img src="files/Bilder/menu-backgr-rechts.png"> <?php else: ?> <img src="files/Bilder/menu-backgr-beides.png"> <?php endif; ?> <?php endif; ?> <?php endforeach; ?> </ul>

Das Problem ist die Zeile "<?php if ($item['isLast']): ?>", denn hierfür kenne ich nicht den richtigen Syntax (Das "isLast" habe ich einfach mal aus den Fingern gesogen...). Ich möchte die Anweisung geben, wenn das Element das letzte ist, dann nimm als letzte Grafik "menu-backgr-rechts.png" und nicht die Grafik "menu-backgr-beides.png", die zwischen den Elementen eingesetzt wird.

Kann mir einer weiterhelfen, wie ich das korrekt hinbekomme?

Vielen Dank im Vorraus!

Lösche das komplette Template und versuche es mit CSS, denn dafür ist es da.

Viele Grüße
Patrick

Hallo seven80,

wenn du für das erste li-Element eine Grafik benötigst und für die li-Elemente dawischen eine gleiche Grafik und für das letzte li-Element eine, kannst du das alles ohne Anpassung des Templates nur mit CSS machen.

Hintergrundgrafiken einsetzen und Contao vergibt die Klasse li.first, li und li.last ;)

Liste der Anhänge anzeigen (Anzahl: 1)

Naja, in die Richtung CSS/Hintergrundgrafik habe ich auch schon gedacht und getestet. Aber das Problem ist ein wenig komplexer mit der Darstellung. Ich habe mal einen Screenshot von dem Menu angehangen.

Da es sich um ein responsive Design handelt, wird die Schriftgröße der einzelnen Menüpunkte angepasst. Damit zusammenhängend sollen sich auch die "Tab-Reiter-Grafiken" in der Breite dem jeweiligen Text anpassen. Dazu ist der Mittelteil eines Tab-Reiters (der Bereich hinter dem Text) per CSS erstellt und wiederholt sich entsprechend der Breite. Die Abschrägungen des Tab-Reiters sind wie anfangs beschrieben über das Template zwischen den Menü-Elementen als Grafik eingefügt und fix in der Breite. Wenn ich diese also per CSS einfüge werden die beschnitten bzw. verzerrt. Daher bin ich ja auf die Lösung mit dem Template gekommen...

Hatte vorhin vergessen dich im Forum willkommen zu heißen was ich hiermit nachhole.

Dein Problem ist ein Darstellungsproblem. Sollte also trotzdem mit CSS gelöst werden.
Ab IE9 kann dir CSS background-size für deine responsive Seite weiterhelfen. Meiner Meinung nach sollte das vorhanden sein, daher würde ich das so machen.

Du kannst einen grafisch weniger schönen Fallback hinterlegen (z.B. Einfache Reiter ohne Grafiken).
Das Fallback-Menu wird dann nur eingeblendet wenn Modernizr (http://modernizr.com/) meldet dass background-size nicht vorhanden ist.

Hab jetzt einige Zeit mit euren Lösungsvorschlägen per CSS ausprobiert und getestet. Vielleicht gibt es auch über diesen Weg eine Lösung (-> Viele Wege führen nach Rom), aber ich hab mich dann doch auf die einfachere und m.E. unproblematischere Lösung in Bezug auf Browserkompatibiltät per PHP konzentriert.

Das korrigierte Template lautet dann:

PHP-Code:

<ul class="<?php echo $this->level; ?>"> <img src="files/eikel/Bilder/menu-backgr-links.png"> <?php foreach ($this->items as $item): ?> <?php if ($item['isActive']): ?> <li class="<?php echo $item['class']; ?>"><span class="<?php echo $item['class']; ?>"><?php echo $item['link']; ?></span><?php echo $item['subitems']; ?></li> <img src="files/eikel/Bilder/menu-backgr-beides.png"> <?php else: ?> <li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li> <?php if ($item['class'] == "sibling last"): ?> <img src="files/eikel/Bilder/menu-backgr-rechts.png"> <?php else: ?> <img src="files/eikel/Bilder/menu-backgr-beides.png"> <?php endif; ?> <?php endif; ?> <?php endforeach; ?> </ul>

War also in der Tat nur ein kleiner Fehler in einer Zeile, der mich dann etliche Stunden gekostet hat! :(

Dennoch Danke für die Hilfsansätze.

Zitat:

Zitat von seven80

Hab jetzt einige Zeit mit euren Lösungsvorschlägen per CSS ausprobiert und getestet.

Wo hat es gehakt?

Zitat:

Zitat von seven80

Vielleicht gibt es auch über diesen Weg eine Lösung (-> Viele Wege führen nach Rom)

In diesem Fall nicht. Dein Code ist absolut nicht valide.

Anpssung Navigation

Hallo
ich brauche ein zusätzliches Div vor dem Level 2 ul .. kann man dis in Contao machen ? und wie?
dann das trail geht bei mir nicht wenn ich auf einem untermenu hover bin ansonsten bei aktiven untermenu dan geht es

Kann man irgendwo sehen was Du erreichen möchtest?
Mit .trail bei :hover geht nicht, .active aber schon? Das sollte doch nur ein CSS Problem sein.

Liste der Anhänge anzeigen (Anzahl: 1)

Ich will das wie auf dem Bild dass muss aber noch weiter runter aber dann wird der obere rote teil grösser

ich muss es auch. mit padding machen sonst wenn man von hauptnav in das untere will verschwindet es wieder...

Schick doch bitte einen Link, damit man Dein Problem nachvollziehen kann.
Ich vermute übrigens auch eher ein css-Problem.

Grunsätzlich kannst Du aber die Ausgaben in Contao im Template beeinflussen.