Page 1 of 1
Vertikales Navigation mit wechseldem Hintergrundbild
Posted: Tue 13. Apr 2010, 15:28
by rogy
Ich möchte ein vertikales Menu (NAV_LIST_UL) welche sich über ein Hintergrundbild führ realisieren. Je nach Rubrik soll ein anderes Hintergrund Bild hinter der Navigation sein.
Ich könnte jeder Seitenstruktur ein anderes Template zuteilen. Wo ich via CSS ein Hintergrundbild unter der Naviagtion definiere. Doch diese Variante könnte mein Kunde nicht selber die Hintergrundbilder via Backend zuteilen z.B Contenpart Bilder <div> im Bereich {LEFT}.
Re: Vertikales Navigation mit wechseldem Hintergrundbild
Posted: Wed 14. Apr 2010, 08:49
by flip-flop
Aus meiner Sicht geht das über ein background-image.
Woher weiß die Seite, wann welches Bild aus dem CP verwendet werden soll?
Wie soll das denn rein technisch vom Ablauf her aussehen?
Knut
Re: Vertikales Navigation mit wechseldem Hintergrundbild
Posted: Wed 14. Apr 2010, 09:44
by rogy
Hier mal die Idee:
http://www.durrerconsulting.ch/home.jpg
http://www.durrerconsulting.ch/news.jpg
Ich könnte jeder Rubrik ein eigened Template zuteilen, aber gibt es keine einfachere Variante?
Re: Vertikales Navigation mit wechseldem Hintergrundbild
Posted: Wed 14. Apr 2010, 10:31
by flip-flop
Es gibt in diesem System (fast) immer eine Lösung.
Normalerweise wird so etwas mit einem Script im /frontend_render/ erledigt, allerdings kann der BE-User das nicht pflegen.
Die userfreundliche Variante sähe etwas anders aus:
Ein spezielles Script, das die Eingaben eines versteckten CPs z.B. Bilder <div>, auswertet und dann eine CSS Klasse in den <head> Bereich schreibt in der das richtige Bild als Hintergrundbild für den betreffenden Bereich deklariert wird. Ist allerdings etwas Aufwand.
Im diesem CP würden die Bilder eingestellt, optimalerweise in der passenden Größe.
- Nun wird in der Bildunterzeile die ID/IDs der Kategorie/n in der dieses Bild erscheinen soll mit einem speziellen Tag z.B. [%ID,ID,ID%] angegeben.
- Die css Klasse steht im Feld Notizen z.B. mit einem Platzhalter [%IMG%] für das jeweilige Bild. (Oder man handelt das im Script oder CP-Template selbst ab, so kann Kunde keinen Blödsinn damit machen).
- Im Template wird dann per [PHP]...[/PHP] die ganze Sache zusammengeführt und diese Klasse für den <head> Bereich zusammengestellt und dort hineintransportiert. Oder man macht das über einen CP-Trigger Script.
Der BE-User kann so seine vorbereiteten Hintergrundbilder in die Dateizentrale laden und mit der Hilfe dieses CPs den einzelnen Kategorien zuordnen (Natürlich mit einem Fallback, wenn keine ID passt oder vergessen wurde).
Ein Template für jede Seite ist unnötig. I.d.R. kommt man mit ein/zwei Templates für die gesamte Seite aus.
Knut
Re: Vertikales Navigation mit wechseldem Hintergrundbild
Posted: Wed 14. Apr 2010, 15:10
by rogy
Danke Knut
Scheint doch nicht so einfach.
Re: Vertikales Navigation mit wechseldem Hintergrundbild
Posted: Wed 14. Apr 2010, 15:47
by flip-flop
Ich fragte oben schon einmal, wie das technisch ablaufen soll.
Du musst ja irgendwie eine Vorstellung haben, wie das HTML-Gerüst dafür aufgebaut ist und wie dann diese Bilder aus dem CP als Hintergrund für bestimmte Seite fungieren können. Dass passiert ja alles zur Laufzeit wenn nicht mehrere Templates vorhanden sind.
Vorbereitet ist so etwas nicht, die oben beschriebene Lösung würde bestens funktionieren. Oder eben die statische Variante mit einem Script, das vom User nicht gepflegt werden kann/sollte.
Knut
Re: Vertikales Navigation mit wechseldem Hintergrundbild
Posted: Wed 14. Apr 2010, 17:29
by top
Positioniere doch einfach zwei DIVs übereinander. ( mit position: absolute; ) In das erste packst du ein Image-Spezial mit deinem Bild und in das zweite DIV deine Navigation.
Wenn du dann dem 1. DIV noch eine Hintergrundgrafik mit einem Standard-Bild verpasst, ist es auch nicht weiter tragisch, wenn mal noch kein Bild definiert wurde.
EDIT: Ich habe mal auf der Heimfahrt ein wenig getippselt:
(ungetestet!)
Code: Select all
<div class="linkenavispalte">
<div class="naviabsolute">{{NAV_LIST_UL:P,0}}</div>
{LEFT}
</div>
und die entsprechende Ergänzung für die CSS:
Code: Select all
.linkenavispalte {
background: #333333 url(bildas/bildvergessen.jpg) no-repeat 0 0;
width: 291px;
height: 460px;
overflow: hidden;
}
.naviabsolute {
position: absolute;
width: 291px;
height: 460px;
overflow: hidden;
}
.naviabsolute ul {
margin: 0;
padding: 100px 0 0 50px;
list-style-type: none;
}
.naviabsolute li {
margin: 0;
padding: 0;
}
.naviabsolute a {
text-decoration: none;
color: #FFFFFF;
}
.naviabsolute a:hover {
color: #000000;
}
Re: Vertikales Navigation mit wechseldem Hintergrundbild
Posted: Wed 7. Jul 2010, 11:31
by santscho
Der Navi die Kategorie-ID mitgeben. Dann via CSS für jede ID den eigenen Button erstellen. Auch der Button-Text kann so grafisch dargestellt werden. -> Allerdings nicht dynamisch.
Diese Methode ist nicht geeignet, wenn öfters Kategorien hinzugefügt/abgeändert werden müssen.
Beispiele (grafische vergikale navigation):
http://www.asiangeographic.org
http://www.asiabeat.net/index.php
http://www.yaml.phpwcms.org
Der originale, dynamisch von phpwcms generierte Text im Button lässt sich ausblenden, indem man dem Text via CSS einen Minus-Versatz von einigen 100px definiert.
