mod_newsmenu ältere Jahre erst bei a:hover einblenden,aktuelles Jahr ständig on

[mulka]

Folgendes ist mein Problem (Contao 3.5.3)
Wir haben eine Webseite, in der wir ein Newsarchiv haben, das nun schon 3 Jahre lang gefüllt wird.(siehe Bild). Standardmäßig werden alle Teasertexte angezeigt, wenn man die Seite anwählt. Erst wenn man einen Monat auswählt, werden nur die Teaser des angewählten Monats gezeigt.

Nun ist die gesamte Teaser-Liste aber schon so lang, dass es unübersichtlich wird. Wir möchte, dass das aktuelle Jahr geöffnet bleibt und die anderen Jahrgänge mitsamt ihren Monaten erst bei Klick aufgehen. Meine Idee war, an den Links <a href="news.html?year=2013">2013</a> eine id mitzugeben und per CSS auszublenden. Weiß nur nicht, wie.
Gibt es andere Wege?

<div class="mod_newsmenu block">
<ul class="level_1">
<li class="year submenu">
<a href="news.html?year=2015">2015</a>
<ul class="level_2">
<li class="first"><a href="news.html?month=201512" title="Dezember 2015 (5 Einträge)">Dezember 2015</a></li>
.....
</ul>
</li>
<li class="year submenu">
a href="news.html?year=2014">2014</a>
<ul class="level_2">
<li class="first"><a href="news.html?month=201412" title="Dezember 2014 (3 Einträge)">Dezember 2014</a></li>
......
</ul>
</li>
<li class="year submenu">
<a href="news.html?year=2013">2013</a>
<ul class="level_2">
<li class="first"><a href="news.html?month=201312" title="Dezember 2013 (1 Eintrag)">Dezember 2013</a></li>
...................
</ul>
</li>
</ul>
</div>

[Spooky]

Gibt es andere Wege?

Ja, CSS lernen und einen Link zur Seite posten . Ins blaue gestyled:

.mod_newsmenu > ul > li + li > ul {
  display: none;
}
.mod_newsmenu > ul > li + li:hover > ul,
.mod_newsmenu > ul > li + li.active > ul {
  display: block;
} 

[mulka]

Danke Spooky
ja, ja ich weiß, CSS.....
Hier der Link zur Seite: http://tds.fh-stralsund.de/news.html

[mulka]

Es klappt tatsächlich! Ich habe noch nie so eine Syntax für eine CSS-Anweisung gesehen wie .mod_newsmenu > ul > li + li > ul
Ich kannte nur .mod_newsmenu ul li li . Und das bezog sich eben auf alle und nicht nur auf bestimmte li

Ich habe eben nochmal gegoogelt und habe keine derartige Syntax gefunden.

Nochmals Danke. Wo kann ich diese Tiefen der CSS nachlesen?

[tab]

Zum Beispiel hier, aber auch an vielen anderen Stellen im Web. "li + li" selektiert alle li, die direkt auf ein anderes li folgen, was in deinem Fall auf alle bis auf das erste zutrifft.

[mulka]

Hab die Antwort inzwischen selber gefunden

der Link ist z.B. http://www.w3schools.com/css/css_combinators.asp

[Spooky]

Das mit dem .active state funktioniert jedoch nicht, da das Newsarchiv Menü leider nur den .active state auf das einzelne <a> setzt und nicht auch auf die parents und die <li>.

[mulka]

Ja, habe ich schon gesehen. Obwohl die Monate der älteren Jahre nun ausgeblendet sind und nur bei hover wieder erscheinen, werden doch die Teaser ALLER Jahre angezeigt. Das ist wirklich schade....

[Spooky]

Ja, habe ich schon gesehen. Obwohl die Monate der älteren Jahre nun ausgeblendet sind und nur bei hover wieder erscheinen, werden doch die Teaser ALLER Jahre angezeigt. Das ist wirklich schade....

Da stimmt aber dann etwas mit der Moduleinstellung nicht.