aktive Navigation erstellen

[mbeckma1]

Hallo,
möchte in der Version 2.83 in der Navigation gerne die aktive Seite farblich hinterlegen und wenn es geht auch eine farbliche Veränderung beim übergehen mit der Maus bekommen. Leider klappt hier gar nichts. Deshalb 2 Fragen:
1. welche CSS ist dafür verantwortlich und wo finde ich diese?
2. welchen Code muss ich dafür eingeben?
Ich weiss, dass hört sich schon sehr newbie an, aber ich hoffe trotzdem auf Eure Hilfe!!

Gruss Manfred

[planepix]

Hallo Manfred,

mit einem Live-Link ginge es einfacher

Für den Zustand Mauszeiger über dem Link ist a:hover zuständig.

Wichtig das davor die Definition für a, a:link und a:visited definiert sind.

Wenn Du ein Modul Navigationsmenü z.B. in der Kopfzeile hast, dann wäre das im CSS:

#header .mod_navigation a:hover
{
...
}

Die aktive Seite im Hauptmenü würde so ausgezeichnet in CSS:

#header .mod_navigation span.active
{
...
}

Gibt es eine Unternavigation und der aktive Hauptmenüpunkt soll aktiv gekennzeichent werden, dann so:

#header .mod_navigation .trail a
{
..
}

Viele Kniffe zu Navigationen gibt es im Wiki.

[mbeckma1]

Hallo planepix!
Danke für deine super schnelle Antwort!!!!!!
Hier ist der Live-Link.
Das Problem ist, dass, egal welche einstellung ich im basic.css unter a:hover
mache, es passiert nichts. Vermute, dass Typolight nimmt eine andere css, oder?

[planepix]

Hallo Manfred,

die basis.css dient u.a. der Darstellung im WYSIWYG-Editor TinyMCE.

In der musicacademy.css stehen auch schon die Definitionen für die Navigation drin.

Ich habe mal den gesamten Bereich für die Navigation genommen und unten die 3 letzten Einträge ergänzt:

.mod_navigation{width:200px;top:38px;position:absolute;}
.mod_navigation ul{margin:0 5px;padding:0;border-bottom:1px solid #607FB8;list-style-type:none;}
.mod_navigation li{margin:0;padding:5px 0;border-top:1px solid #607FB8;list-style-type:none;}
* html .mod_navigation ul,* html .mod_navigation li{height:1px;}
.mod_navigation .level_2{padding:3px 0 0 9px;border-bottom:0px;}
.mod_navigation .level_2 li{padding:0 0 3px;border-top:0px;}
.mod_navigation a,.mod_navigation li,.mod_navigation span{font-family:verdana, sans-serif;font-weight:bold;text-decoration:none;font-size:13px;color:#000000;}
.mod_navigation .level_2 a,.mod_navigation .level_2 li,.mod_navigation .level_2 span{font-weight:normal;font-size:11px;}
.mod_navigation a:hover{color:#f30;}
.mod_navigation span.active{color:#f30;}
.mod_navigation .trail a{color:#f30;}

ergänze nur diese 3 Zeilen im CSS musicacademy.css:

.mod_navigation a:hover{color:#f30;}
.mod_navigation span.active{color:#f30;}
.mod_navigation .trail a{color:#f30;}

Als Beispiel wird dann die Textfarbe rot.

[mbeckma1]

Danke planepix!

klappt jetzt super!!!!!!

Gruss Manfred