Frage zu current-page-ancestor

Akeem040767

Hallo allerseits,

ich möchte, dass beim aufrufen einer Unterseite aus meinem (Eltern-)Menü (Beispiel menu-item-46) der (Eltern-)Menüpunkt unterstrichen bleibt.
Bisher ist es so definiert:

Code

.menu-item-46 a:link {color: #E5BD14;}
.menu-item-46 a:active {color: #E5BD14;}
.menu-item-46 a:hover {border-bottom: 3px solid #E5BD14;}
.menu-item-46 a:visited {color: #E5BD14;}

Wie müsste ich jetzt den current-page-ancestor einfügen, dass nur das (Eltern-)menu-item-46 die Unterstreichung behält?

Ist diese vorgehensweise überhaupt sinnvoll, um verschiedene Menüs durch zu stylen?

Danke.
Grüße
Achim

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

pixselig

Hallo nochmals ;)
Auf was willst du hinaus? Willst du jeden Menüpunkt individuell stylen (sowohl parent als auch child etc.)? Oder reicht es dir, wenn immer der entsprechende aktive Parent einheitlich hervorgehoben wird?
Hast du eventuell auch einen Link zu deiner Seite?
LG, Pixselig

Akeem040767

:-)
Nein, du hast es korrekt verstanden: es soll jeder Menüpunkt individuell stylebar sein.

Ich bin momentan noch in localhost-Modus. Hoffe das geht trotzdem?

Grüße Achim

pixselig

Gehen sollte das trotzdem. Habe selber schon mal jemandem dabei geholfen, nur habe ich im Moment diesbezüglich nur Matsch in der Birne.
Werde jetzt mal Laufen gehen und mich dann nochmal melden.

Genau: was soll den bei den verschiedenen aktiven Parents unterschiedlich im vergleich zur normalen Ansicht der jeweiligen Parents sein? Hast du vielleicht einen Screenshot in dem du das einzeichnen könntest?

Akeem040767

Kein Problem. Danke. Bis später.

pixselig

Screenshot mit Skizze wäre toll, Achim. Bis später. LG, Stephan

Akeem040767

[COLOR=#222222][FONT=Verdana]
"Schulleben" ist parent, den ich jetzt noch mit border-bottom: 3px solid #E5BD14; versehen würde.[/FONT][/COLOR]

pixselig

So da bin ich wieder ;)
Ich nehme an dass sich die Farbe des Unterstrichs (border) je nach Parent (Schulleben, Termine, Klassen etc.) ändern soll.
Wenn nicht ginge es ja ganz einfach via ".current-page-ancestor", oder wie bei dir der entsprechende Selektor auch heisst.
Wenn schon (wie ich annehme) wirds ein bischen komplizierter (und ohne Link kann ich dir keine genauen Codes liefern sondern nur Denkanstösse):

1. Möglichkeit: der aktive Parent bekommt ja diverse Selektoren (darunter die wichtigen "current-page-ancestor" und "menu-item-XX"). Via CSS kannst du Elemente ansprechen die genau diese diese Klassen enthalten (und zwar nur diese) indem du die einzelnen Klassen ohne Abstand(Space) im Stylesheet zusammenfasst.

Beispiel:
Template-Datei:

PHP

<html>
<body>
<div class="class1 class2 class3">
hello world 1
</div>
<div class="class1">
hello world 2
</div>
<div class="class2">
hello world 3
</div>
</body>
</html>

Alles anzeigen

Stylesheet:

Code

.class1.class2.class3 {color: red;}

bei diesem Beispiel bekommt nur "hello world 1" eine rote Farbe, im Vergleich dazu bekommen bei:

Code

.class1, .class2, .class3 {color: red;}

"hello world 1", hello world 2" und "hello world 3" eine rote Farbe!

2.Möglichkeit:
Du könntest es auch über Geschwisterselektoren lösen: http://wiki.selfhtml.org/wiki/CSS/Selek…hwisterselektor
hier nimmst du die ID des vorigen Links und setzt für den aktiven Parent das "current-page-ancestor" dran. So sollten sich auch alle Parents individuell gestalten lassen.
Hinweis: da der erste Punkt (Schulleben) keine vorangegangene ID hat reichte es diesen nur mittels "curren-page-ancestor" zu stylen. Alle folgenden Punkte wie oben beschrieben plus eventuell einem "!important" um die erste Deklaration auch sicher zu überschreiben.

LG, Pixselig

PS: es gibt sicher noch viele andere Möglichkeiten ;)

Akeem040767

[COLOR=#222222][FONT=Verdana]Verstehe ich das richtig, von folgendem Selektoren-Beispiel ausgehend:

<li id="menu-item-46" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-46"><a href="#">Schulleben</a>

bezieht sich ja auch auf mein Beispiel von oben.

Mit

.current-menu-parent.menu-item-46 {border-bottom: 3px solid #E5BD14;}

komme ich ja schon hin.

Oder habe ich einen Denkfehler?

Danke.

Grüße
Achim

[/FONT][/COLOR]

pixselig

Sollte passen, ja!
Funktionierts denn?

Akeem040767

Ja, ich bekomme nur die Linie etwas zu tief.

Mein <li> ist höher wie mein <a>.

Ich glaube daran liegt es. Das werde ich aber schon irgendwie hin bekommen.

Danke für Deine Hilfe.

Grüße
Achim

pixselig

Das <a> befindet sich ja innerhalb des Listenelements -> ist also eine (einfache) positionierungs Sache ;) Das solltest du mittels FireBug o.ä. leicht lösen können.

Aber schön dass es sonst funktioniert :D

LG, Pixselig

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Frage zu current-page-ancestor

Jetzt mitmachen!