Navigation in eigenem Layoutbereich

[El_Jey]

Hallo liebes Forum,

ich habe auf meiner Seite unterhalb des Headers einen eigenen Layoutbereich angelegt, indem eine individuelle Navigation liegt.

Ich hätte gerne, dass der 1. Punkt dieser Navi aktiv ist, sobald die Startseite geöffnet wird.

Ich habe für die Startseite ein eigenes Layout angelegt, da der eigene Bereich nur in dieser Seite vorhanden ist und es durch Css Positionierungen recht unübersichtlich geworden wäre.

Also ist es möglich, dass der Startseitenpunkt der Navigation im Header aktiv bleibt und trotzdem der 1. Punkt der Navigation im eigenen Layoutbereich aktiv ist und wenn man dort einen anderen Punkt anklickt weiterhin der Startseitenpunkt im Header aktiv bleibt?

Ich hoffe es ist einigermaßen verständlich.

lg El_Jey

[MacKP]

Hallo El_Jey,
wenn du die Navigation mit dem normalen Navigations-Modul gemacht hast, dann hat diese die Klasse .trail, wenn du auf einer Seite die da drinn liegst bist. Also könntest du das darüber Formatieren.
Ansonsten in der Seitenstruktur der Seite eine extra Klasse geben und darüber Formatieren.

Viele Grüße

[El_Jey]

Okay.

Also es ist eine "individuelle Navigation" und das Problem ist ja lediglich, dass ich das background-image gerne bei dem 1. Punkt zu sehen hätte, auch wenn er nich angeklickt wurde, aber wenn man den 2. Punkt anklickt es rüber springt. Also ein .active befehl. Nur war ja halt mein Problem, dass der 1. Punkt der Navigation nicht aktiv ist, wenn man auf die Startseite kommt, da die Navigation von der ich spreche im eigenen Bereich liegt und in der Seitenstruktur 1 Unterpunkt von der Startseite ist.

Eigtl würde es ja schon reichen, wenn ich einstellen könnte, dass der 1. Punkt im eigenen Bereich darin geöffnet wird, sobald man die Startseite öffnet. Keine Ahnung ob das möglich ist.

lg El_Jey

[MacKP]

Hallo El_Jey,
anscheinend gefallen dir meine beiden Vorschläge nicht wirklich...
Evnetuell beschreibe ich die Möglichkeit über Kalssen eben noch was genauer, da ich glaube das du damit am einfachsten zu deiner Lösung kommst:

- 2 Klassen vergeben: Punkt_1_aktiv / Punkt_2_aktiv
- Jeder Seite wo das dann so aussehen soll als ob die aktiv sind diese Klasse in der Seitenstruktur geben
- formatieren: body.Punkt_1_aktiv #navigation li.Punkt_1_aktiv

Achtung: Nur Beispielhaftes CSS. Muss angepasst werden.

Viele Grüße

[El_Jey]

Okay. Deine Vorschläge gefallen mir bestimmt, wenn das die Lösung für mein Problem ist.

Ich steh nur gerade ein kleines bisschen auf dem Schlauch.

Also ich hatte erst probiert über den Selektor .first einfach dem 1. Punkt der Navigation ein Hintergrundbild zu geben. Dadurch sah er natürlich aktiv aus, allerdings blieb der Hintergrund auch, wenn ein 2. Punkt angeklickt wurde. Also waren dann 2 Hintergrundbilder zu sehen.

Vllt verstehe ich deinen Vorschlag auch nur nicht richtig, da ich erst seit ca. 2 Monaten mich ernsthaft mit CSS beschäftige. Aber hätte deine Idee nicht den selben Effekt?

lg El_Jey

[MacKP]

Hallo El_Jey,
die Klasse .first wird der Navigationspunkt immer haben, da es immer der erste Punkt ist.
Wenn du dir genau durchliest was ich geschrieben habe, dann gibst du damit nur den Seiten die passende Klasse, wenn die auch als aktiv erscheinen soll.

Hier auch noch mal die Theorie zur Navigation:
http://de.contaowiki.org/ModulNavigation
Eventuell kannst du die Struktur ja auch so umbauen, das es dir auch mit der Normalen Navigation gelingt das zu erreichen was du möchtest...

Viele Grüße

[El_Jey]

Hi MacKP,

da hast du recht, das müsste kein Problem sein die Struktur so umzustellen.
Ich werde es auf jeden fall mal so ausprobieren.

Und jetzt wo du es sagst verstehe ich es doch mit .trail

Ich denke das wird mein Problem lösen. Danke dir, echt super Forum.

lg El_Jey

[El_Jey]

Also nachdem ich jetzt im Urlaub war usw hab ich mich dem Problem nocheinmal gewidmet .. ich habe jetzt anstatt einer individuellen Navigation eine normale genommen und es ist soweit auch alles Prima allerdings bleibt der Punkt1, welchen ich gerne Aktiv haben wollte immer Aktiv, allerdings solle er nur so aussehen, wenn entweder keiner der 4 Punkte aktiv ist oder nur der Punkt selbst. Wenn Punkt2-4 angewählt sind, soll er nicht aktiv aussehen ..

lg El_Jey

[Nikolaj]

Vielleicht wäre es eine Lösung mit den Body ids und klassen zu arbeiten und so den Stile für .first jeweils anzupassen.

Sent from my HTC Desire using Tapatalk

[El_Jey]

Ja nur wäre ja durch .first immer der 1. Punkt angesprochen, auch wenn die darunter liegenden Punkte aktiv sind.

Oder was meinst du mit den body IDs und Klassen?

[Nikolaj]

Also, vielleicht habe ich dich auch falsch verstanden aber ... der Punkt soll anscheinend immer aktiv erscheinen außer wenn, Punkt 2-4 selktiert worden sind, oder?

Wenn dem so ist, dann gib dem Menupunkt ".first" default-mäßig das Active-Ausehen und den Seiten 2-4 weist du eine Klasse zu und dann definierst du im CSS:

.klasse-2-4 .klasseDeinesMenus .first {...Aussehen für inaktiven Zustand...}

Wenn du das Verhalten beispielsweise nur auf den Menupunkten 1-5 haben willst, dann gehst du folgendermaßen vor

- du gibst allen 5 Seiten die Klasse "klasse-1-5"

Definierst den aktiven Zustand

.klasse-1-5 .klasseDeinesMenus .first {...Aussehen für aktiven Zustand...}

- dann den drei anderen Seiten zusätzlich die Klasse "klasse-2-4" geben

und so sieht dann der inaktive Zustand aus

.klasse-1-5.klasse-2-4 .klasseDeinesMenus .first {...Aussehen für inaktiven Zustand...}


Die Klassen für Seiten kannst du in den Seiteneinstellungen unter Seitenstruktur vergeben

[Nikolaj]

Ich seh gerade, dass MackP schon den selben Ansatz geliefert hatte. Hast du das ausprobiert? Half das denn nicht?

[MacKP]

Also nachdem ich jetzt im Urlaub war usw hab ich mich dem Problem nocheinmal gewidmet .. ich habe jetzt anstatt einer individuellen Navigation eine normale genommen und es ist soweit auch alles Prima allerdings bleibt der Punkt1, welchen ich gerne Aktiv haben wollte immer Aktiv, allerdings solle er nur so aussehen, wenn entweder keiner der 4 Punkte aktiv ist oder nur der Punkt selbst. Wenn Punkt2-4 angewählt sind, soll er nicht aktiv aussehen ..

lg El_Jey

Hallo El_Jey,
das klingt so als ob du das so gemacht hast:

Punkt1
- Unterpunkt
- Unerpunkt
- etc.

d.h. alle Seiten sind in Punkt1 und diesen hast du mit der Klasse .trail formatiert?

Sinnvolle Umstrukturierung wäre da eher:

Punkt1
- Unterpunkt
Punkt2
Punkt3
Punkt4

Oder du machst es eben wie jetzt schon 2 mal vorgeschlagen mit ner extra Klasse, die du den Seiten zuweist, wo Punkt1 aktiv aussehen soll.

Eventuell helfen uns da auch Bilder von deiner Seitenstruktur und Bilder von deiner Vorstellung der Struktur oder so...

Viele Grüße

[MacKP]

Also noch mal von Anfang.
Damit du bei bestimmten Seiten so tun kannst, als ob ein Navipunkt aktiv ist (obwohl der das ja nicht ist) musst du den Seiten wo das so aussehen soll in der Seitenstruktur eine extra Klasse geben.
Zum Beispiel: punkt_1
Jetzt kannst du den Navipunkt so formatieren:

body.punkt_1 .mod_navigation.green_box ul li

Da das nun alle Navipunkte in der Art betreffen würde (bei deinem Setting) musst du auch der Seite die dem Navipunkt zugeordnet ist eine eigene Klasse geben -> ueber_mich

Dann hast du die Möglichkeit das so zu formatieren: body.punkt_1 .mod_navigation.green_box ul li.ueber_mich

Ganz allgemein gesagt noch: ich würde den Hintergrund und die Ausdehenung des Navipunktes eher bei a machen, da du dann einacher Formatieren kannst und immer das ganze Klickbar ist.

Hoffe das hilft dir nun weiter...

Viele Grüße

[El_Jey]

Damit du bei bestimmten Seiten so tun kannst, als ob ein Navipunkt aktiv ist (obwohl der das ja nicht ist) musst du den Seiten wo das so aussehen soll in der Seitenstruktur eine extra Klasse geben.

Der einzige Punkt, der so aussehen soll, als wäre er aktiv ist der Punkt "Über mich"

Da das nun alle Navipunkte in der Art betreffen würde (bei deinem Setting) musst du auch der Seite die dem Navipunkt zugeordnet ist eine eigene Klasse geben -> ueber_mich

Das ist ja dann die selbe Seite wie bei der vorherigen Klasse nämlich "Über mich"

Oder vertue ich mich?

Ich habe so wie du es gesagt hast und wie du es schoneinmal gesagt hattest der Seite "Über mich" eine Klasse gegeben "punkt_1" und diese dann über body.punkt_1 .mod_navigation.green_box ul li formatiert.

Allerdings passiert dann genau das, was du gesagt hattest, dass alle Navipunkte sich ändern.
Habe es dann über body.punkt_1 .mod_navigation.green_box ul li.first probiert, das geht natürlich, aber dann hätte ich ja auch direkt .mod_navigation.grenn_box ul li.first nehmen können ...

Sry wenn ich zu doof bin aber ich hab mir deinen Beitrag jetzt 100 mal durchgelesen und rumprobiert .. sonst bin ich eigentlich nicth so schwer von kapisch ^^

lg El_Jey

[MacKP]

Gib allen Seiten wo dieser Punkt aktiv sein soll ne Klasse.
Wenn du das hast kannst du den einen Punkt dann so formatieren wie du oben beschrieben hast, mit first.
Diesen Punkt scheinst du immer zu überspringen so wie ich das verstehe?


Ich hatte eigenltich gedacht, das es verschiedene Punkte sind, die so formatiert weden müssen. Daher hatte ich vorgeschlagen dann noch den Punkt an sich mit ner Klasse zu versorgen. Da es aber schon .first an der Stelle gibt reicht das in dem Fall.

Viele Grüße

[El_Jey]

Ich habs endlich geschnallt. Funktioniert alles super jetzt.

Ich kannte nur den Css Befehl noch nicth mit body.Klasse

Hat mir sehr geholfen danke

[MacKP]

Besser etwas spät als nie ;-)

Du kannst das auch ohne body schreiben: .klassenname und so weiter
Aber ich finde es durchaus eindeutiger so.

Viele Grüße

[El_Jey]

Da hast du recht.

Und ich hab einfach bisher noch nie einer Seite in der Struktur eine Klasse vergeben. Durchaus Modulen etc. aber noch nie einer Seite.

Nochmal besten dank