CSS: Active-Zustand - Menü-,Menüunterpunkte

iwd · 12.01.2010

Hallo zusammen,

Ich versuche active-Zustände einzubauen, jedoch klappt es nicht so flexibel wie ich es mir vorgestellt habe.

Menü soll beim activen Menüpunkt farblich hervorgehoben werden:
Im nachfolgenden Beispiel befindet sich der User innerhalb des Beitrages von "Menüunterpunkt 3.2"

Menüpunkt 1

Menüunterpunkt 1
Menüunterpunkt 2
Menüunterpunkt3
- Menüunterpunkt 3.1
- Menüunterpunkt 3.2
Menüunterpunkt 4

Weiss jemand von euch, wie ich das Beispiel im CSS umsetzen kann?
ich freue mich!

Lieben Gruss

sokie · 12.01.2010

AW: CSS: Active-Zustand - Menü-,Menüunterpunkte

der Zustand :active besteht nur in dem moment, in dem auf das Element geklickt wird.
um die Elemente deines Beispiels per css zu formatieren, müsste ihnen eine klasse zugewiesen werden.

iwd · 12.01.2010

AW: CSS: Active-Zustand - Menü-,Menüunterpunkte

Hi soki,
ja das habe ich schon ausprobiert. Aber es will nicht so recht.
Weiss jemand eine Lösung zur Umsetzung mit Beispiel-CSS-Zuweisung anhand meines einfachen Beispiels?

Lieben Gruss

rest5 · 12.01.2010

AW: CSS: Active-Zustand - Menü-,Menüunterpunkte

Da hilft nur jeder Seite im body eine eigene ID zu geben und die jeweils aktiven Menüpunkte darüber anzusprechen. Ausführliches Tutorial hier:

FredFuchs94 · 12.01.2010

AW: CSS: Active-Zustand - Menü-,Menüunterpunkte

Das geht in Verbindung von PHP und CSS.
Bei jedem Laden der Seite schaust du einfach bei jedem Objekt ob es aktiv ist, wenn ja hinterlegst du die passende class damit es "active" ist.
Ansonsten musst du da was mit JS machen denke ich. Aber das wäre mir persönlich viel zu umständlich. Und in PHP würde ich mir dafür einfach ne Funktion schreiben. Da gibst du dann ne ID des Elements ein und dann schauste halt nach. Wirst ja in der URL stehen haben irgendwie auf welcher Seite du bist.
Denn mit PHP hast du es, falls du die Navi includest oder im index stehen hast, dynamisch und einfach.

chacki · 12.01.2010

AW: CSS: Active-Zustand - Menü-,Menüunterpunkte

Wie wärs dem Li Element eine Klasse zu zuweißen und dann z.b. mit border-bottom das Element zu unterstreichen?

FredFuchs94 · 12.01.2010

AW: CSS: Active-Zustand - Menü-,Menüunterpunkte

Das stand doch garnicht zur Frage, sondern vielmehr wie man das so macht und nicht wie man es am besten hervorhebt.

chacki · 12.01.2010

AW: CSS: Active-Zustand - Menü-,Menüunterpunkte

Und wie hebt man etwas hervor, indem man es unterschreichst oder eine andere Farbe gibt. Oder verstehe ich da was falsch?

iwd · 12.01.2010

AW: CSS: Active-Zustand - Menü-,Menüunterpunkte

Danke für euere Beteidigung.
Habe gehofft, dass ich das Anliegen ausschliesslich mit CSS lösen kann. ich werde mich dann mal von dem Tut, das rest5 gepostet hat auseinander setzen.
Falls jemand dennoch ne einfachere Lösung - einfach schreiben.

Schönen Abend weiterhin.

Chickenshooter · 12.01.2010

AW: CSS: Active-Zustand - Menü-,Menüunterpunkte

@iwd

arbeitest Du überhaupt mit PHP oder weisst Du denn was PHP ist?
Wenn nicht wird es wirklich schwierig.

iwd · 13.01.2010

AW: CSS: Active-Zustand - Menü-,Menüunterpunkte

, ja ich weiss was PHP ist. Ich kann den Code etwas lesen. Jedoch nicht schreiben!
Wenn du da was hast, immer her damit; ich bin für alles offen.

maxxscho · 13.01.2010

AW: CSS: Active-Zustand - Menü-,Menüunterpunkte

Bei kleineren Websites mach ich es einfach so:
Ich geb den body-Tag jeder Seite ne ID

HTML:

<body id="eins">

Dann bekommt jeder Button im Menü ne Klasse

HTML:

<a href="xyz.html" class="eins" title="xyz">xyz</a>

Nun kann ich in der CSS jeden den, nennen wir es aktiven, Link folgendermaßen ansprechen

HTML:

#eins .eins, #zwei .zwei, #drei .drei{
formatierung
}

Das heißt nur auf der Seite mit der ID "eins" ist auch der Link mit der Class "eins" optisch" hervorgehoben.
Du hast deine Formatierungen für die aktiven Links in einem css-Block, es bleibt übersichtlich und platzsparend.

Das ganze läßt sich natürlich auch nach deinen Bedürfnissen anpassen und kombinieren.
Und vergiß nicht, einem Objekt können auch zwei Klassen zugewiesen werden, die du dann seperat per css ansprechen kannst

HTML:

<a class="eins zwei" href="xyz.html">Eins</a>

Dieser Link hat jetzt 2 Klassen, einfach durch ein Leerzeichen getrennt.

Ich hoffe, das kann dir vielleicht helfen.

Gruss

edit: hab gerade gesehen, dass in dem oben genannten Tut, das auch so gelöst wird, hätte mir diesen Post also sparen können. Naja ...

maxxscho · 13.01.2010

AW: CSS: Active-Zustand - Menü-,Menüunterpunkte

FredFuchs94 schrieb:
Das geht in Verbindung von PHP und CSS.
Bei jedem Laden der Seite schaust du einfach bei jedem Objekt ob es aktiv ist, wenn ja hinterlegst du die passende class damit es "active" ist.
Ansonsten musst du da was mit JS machen denke ich. Aber das wäre mir persönlich viel zu umständlich. Und in PHP würde ich mir dafür einfach ne Funktion schreiben. Da gibst du dann ne ID des Elements ein und dann schauste halt nach. Wirst ja in der URL stehen haben irgendwie auf welcher Seite du bist.
Denn mit PHP hast du es, falls du die Navi includest oder im index stehen hast, dynamisch und einfach.

Hast du hierfür vielleicht ein paar Codeschnipsel? Würde mich interessieren, bin nämlich gerade dabei, mir php beizubringen.