CSS : Veränern des Hintergrunds des aktiven Listeneintrags (mit JS und innerHTML?)

[after8]

Hi @ all!

Bin dabei ein etwas komplexeres Navigationslayout meines "lieben Designer Alter-Egos" umzusetzen. Er stellt sich das immer so einfach vor
Klappt soweit auch gut nur nun bräuchte ich einen kleinen Schupps in die richtige Richtung…

Die Navigation soll wie folgt aussehen:
Nav.png

Ich brauche also für den aktiven Listeneintrag links ein anderes Hintergrundbild als ihn die inaktiven Elemente haben – bestehend aus 3 Divs:
* top (runde Ecke und Schatten)
* middle (Schatten left repeat-y)
* bottom (runde Ecke und Schatten)!

Wie realisiere ich das am besten? Wo baue ich das am besten ein (fe_page.tpl)?
Vermutlich mit einer JS-Funktion die mir die divs in einer innerHTML-Anweisung bei Klick auf Navigationsebenen 2 Element in den entsprechenden li einfügt und ner Schleife die alle anderen von eben diesen zusätzlichen divs "befreit".

Ich hoffe mich so einigermaßen verstänlich ausgedruckt zu haben und jemand kann mir weiterhelfen.

Grüße aus der Ferne…
Michael

[Bandyt]

Wieso nicht einfach mit CSS?

Dazu eine Navigation hinzufügen.

Alle Elemente laufen unter

<ul class="level_1">

Das aktive Element (Dort wo die Unterelemente sichtbar sind) heißt dann z.b.

<li class="active submenu">

Alle anderen Elemente sind einfache <li>


Ich hoffe das hilft dir weiter!

[after8]

Hi Bandyt,

danke für den Vorschlag!
Ich verwende sowohl auf Level 0 (TOP) als auch auf Level 1 und 2 (LEFT) ein Navigations-Modul. Mit dem Einblenden der Links (Level 2) klappt auch alles, nur eben das Hintergrundbild…

Ich denke, dass ich mit CSS (2) analog Deinem Vorschalg kein variables Hintergrundbild mit Schatten und abgerundeten Ecken oben und unten via CSS einfügen kann, da unterschiedliche Anzahl von Unterseiten - Level 2 - ein unterschiedlich "hohes" Hintergrundbild erfordern. Sprich ich brauche (so mein CSS-Wissen) innerhalb des active_submenue_Blocks mindestens 3 "Container".
Die Zuweisung eines "einfachen" / konstant hohen Hintergrundbildes mit Deinem Vorschlag funktioniert natürlich …

Übersehe ich etwas? Denn eine reine CSS-Lösung wäre natürlich zu bevorzugen.

Vielleicht kannst Du mir ja auf die Sprünge helfen, wenn ich die Lösung "nicht verstehe"

Danke
Michael

[after8]

Hallo nochmals,

da mir bisher keiner so richtig helfen konnte, würde ich euch um ein wenig Unterstützung in Richtung Contao-Dateistruktur bitten.

Wo kann ich die Datei/Funktion finden, die für die Erzeugung der Navigationsmodule verantwortlich ist, da ich dort gerne meine JS-Dateien einbauen würde.

Danke
Michael

[xkoy]

nav_default.tpl

System/modules/frontend/templates/

Warum machst das alles nicht einfach mit css, border-radius, shadow, alles möglich. Is halt leider nicht abwärtskompatibel, aber lohnt der aufwand ? Oder könntest du auch mit fixer breite machen... dann eben mit nem Hintergrundbild..

[do_while]

nav_default.tpl

System/modules/frontend/templates/

Bitte nie direkt in den Core-Dateien Änderungen einbauen, da sonst nach jedem Update die Änderungen überschrieben sind!
Mache Dir eine Kopie mittels dem Backend-Menüpunkt "Templates" und ändere in dieser Kopie (Datei liegt dann im Verzeichnis templates). Diese Änderungen sind updatesicher und bleiben beim Update erhalten.

[after8]

Dank Dir für die schnelle Antwort! (Antworten )

…leider ja, Kompatibilitätsanforderungen des Auftraggebers… und ein einfacher grauer Pseudoschatten hat ihn nicht überzeugt…

Breite ist nicht das Problem - denke ich - sondern die variable Höhe…

Hab mir überlegt das:
* aktive li level_1 Element mit nem Hintergrundbild (Ecke oben links und Schatten) zu Versehen
* aktive ul level 2 Element mit Hintergrundbild (Schatten links) repeat-y ->Problem: nicht nach links verschiebbar…
* aktive ul level 2 li last mit Hintergrundbild (Ecke unten links und Schatten) -> Problem: nicht nach links verschiebbar…

Sprich ich hab - meinem wirklich nicht Experten-CSS-Kenntnissen entsprechendem Wissen folgend - alles versucht… bisher ohne Erfolg

Aber wie gesagt, vielleicht übersehe ich ja etwas…

[psren]

In dem Beispiel handelt es sich zwar um eine andere Navigation, könnte man aber auch auf deine Wünsche verwenden

http://www.alistapart.com/articles/slidingdoors/

[lucina]

So wie ich Deine Frage verstehe benötigst Du ein paar zusätzliche DIVs, um die gewünschten (Hintergrund)Grafiken zu platzieren.

Da CSS3 für Dich ausfällt: Kann man mit zwei anderen Methoden machen - entweder direkt in einer Kopie des Navi-tpl, oder eben (wie Du ja auch schon andeutst) via js (was dann den Nachteil hat, dass es für alle ohne js dann eben nicht zur Verfügung stehen wird. Das ist aber schon sehr viel eleganter als die Brachialmethode ... ;-)

Eine grundlegende Beschreibung, wie Du mittels Mootools-Funktion zusätzliche Elemente dem DOM hinzufügst findest Du unter http://www.consideropen.com/2008/08/...pulating-html/ im Abschnitt "Creating a New Element".

Das ist keine Zauberei, aber auch nicht ganz trivial. Mootools solltest Du schon verstanden haben.

Good luck,
Carolina.