li.active problem / vertikale navigation

[marczw]

Hallo,

ich habe das folgende Problem und komme alleine nicht weiter:

In TL 2.7.2 habe ich links eine vertikale Navigation, bei der die 2. Ebene nur dann eingeblendet wird wenn man den 1. Ebene Punkt angeklickt hat.

Es gibt ein individuelles List Style Element (Grafik) die über li eingebunden ist, wenn ein Menüpunkt aktiv ist.

Ich habe nun ein .mod_navigation .level_1 li.active definiert mit
{ list-style-image:url ("tl_files/layout/linered.gif");}

allerdings wenn ich dann per Maus diesen Menüpunkt anklicke im Frontend und dann die 2. Ebene Navigation aufgeht, haben alle 2. Ebenepunkte das gleiche List Element ebenfalls in der Anzeige

Das folgende brachte auch noch keine Abhilfe:

.mod_navigation .level_1 li.active .level_2
{ list-style-type:none; }

oder auch nicht mit:

.mod_navigation .level_1 li.active .level_2
{ list-style-type:none; }

oder auch nicht mit .mod_navigation ul li ul .active ...

Wie kriege ich es so geschaltet, dass mein List Style Element ausschließlich nur auf Level 1 angezeigt wird und nicht in den frisch ausgeklappten Level 2?

Wenn ich dann einen Menüpunkt nur von Level_2 anwähle, dafür klappt das Konfigurieren ja wieder ganz prima ...

LG


Die Menüstruktur kann man sich wie folgt vorstellen:

<ul>
<li>Item 1.1</li>
<li>Item 1.2
<ul>
<li>Item 1.2.1</li>
<li>Item 1.2.2</li>
<li><a href="test.htm">Item 1.2.3</a></li>
</ul>
</li>
<li>Item 1.3</li>
<li>Item 1.4</li>
</ul>

[Antipitch]

Hi marczw,
diese Angabe

.mod_navigation .level_1 li.active {
list-style-image:url ("tl_files/layout/linered.gif");
}

ist Unsinn. list-style steht für Listen zur Verfügung, nicht für Listenpunkte. Wenn das etwas bewirkt, ist das Zufall/ ein Bug, kann aber dann mit dieser Anweisung

.mod_navigation .level_1 li.active .level_2 {
list-style-type:none;
}

nicht aufgehoben werden. Denn die ist jetzt richtigerweise auf eine Liste (UL) angewendet, die erste Angabe gilt aber weiterhin auch für deren li.active-Elemente.

Ansonsten würde ich vorwiegend mit Nachfahren-Selektoren (ul, ul li, ul li ul, ul li ul li etc) arbeiten und mir die Klassen für die Spezialfälle (active, trail) aufheben. Damit umgehst du Gewichtungsprobleme (Basiswissen dazu hier). Und guck dir den Quellcode deiner Seite bei unterschiedlichen Menü-Zuständen an, dann siehst du, welche Klassen wann vergeben werden.


cheers
Antipitch

[marczw]

Hallo antipitch,

vielen Dank für den Link mit der Gewichtung....

In solche Tiefen musste ich mich selbst noch nicht reindenken, aber hier ist die Systematik schon mal gut beschrieben.

Zwischenzeitlich habe ich schon eine andere Lösung gefunden die auch sauber funktioniert: und zwar über background-image - hier klappt dann auch die Selektion über span bzw. a einwandfrei für mein Problem und es ist ein ganz kurzes schönes übersichtliches CSS für die Navigation geworden :-)

Puuuuuh - da das jetzt endlich mal geschafft wäre, werde ich mir nun noch etwas genauer diese Gewichtunglogik "reinziehen" ;-)

Schönen Abend noch allerseits