nicht angemeldet
Toggle Menu
Gunnar BittersmannHallo,
ich beschäftige mich seit einiger Zeit mit einem Toggle-Menü, wie es auf http://orf.at zu sehen ist:
Klickt man dort auf einen Link, so klappt der dazugehörige Artikel darunter auf.
Auf orf.at ist diese Funktion mit Javascript ausgeführt. Ich konnte sie (unter Mithilfe einiger hier im Forum, nochmals vielen Dank!) weitgehend mit CSS nachkonstruieren:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.sitepart {
display:none;
overflow:hidden;
}
.sitepart:target {
display:block;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#seite1">Seite 1</a></li>
</ul>
</nav>
<article class="sitepart" id="seite1">
<p>Lorem ipsum dolor sit amet. </p>
<a href="#">(ausblenden)</a>
</article>
<nav>
<ul>
<li><a href="#seite2">Seite 2</a></li>
</ul>
</nav>
<article class="sitepart" id="seite2">
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
<a href="#">(ausblenden)</a>
</article>
</body>
</html>
Dies funktioniert soweit auch hervorragend (wie gesagt, nochmals danke!), mit EINER EINSCHRÄNKUNG:
Klickt man auf orf.at auf einen Link, so ändert sich dessen Erscheinungsbild, sobald der korrespondierende Artikel aufgeklappt ist, von WEISS auf SCHWARZ (und wird so optisch zur Überschrift des Artikels), während der Hintergrund von BLAU AUF WEISS wechselt.
Ließe sich dies irgendwie in den dargelegten Code integrieren? Stehe ich hier tatsächlich nur verdammt auf der Leitung, oder ist das echt ein Problem?
Ich habe versucht, die Navigationsleisten mit einer Klasse anzusprechen und dieser für :target gewünschte Attribute zuzuweisen, was [natürlich] so nicht funktioniert hat...
Lässt sich dies überhaupt nur mit CSS (ohne Javascript) umsetzen? (Wäre meine präferierte Lösung...)
----
Anmerkung:
Ich bin mir natürlich völlig darüber im Klaren, dass die Seite syntaktisch grauenvoll aufbereitet ist, da die NAV-Elemente von den ARTICLE-Elementen unterbrochen werden. Dafür möchte ich mich bei allen hier auch förmlichst entschuldigen, lässt sich aber mit CSS alleine leider nur so bewerkstelligen! :)
-
Moin moin!
Ich bin mir natürlich völlig darüber im Klaren, dass die Seite syntaktisch grauenvoll aufbereitet ist, da die NAV-Elemente von den ARTICLE-Elementen unterbrochen werden.
Warum denkst du dann nicht über eine Alternative nach? Schreib doch zusammen, was zusammen gehört!
<article id="artikel1"> <h1><a href="#artikel1">Menschenwürde</a></h1> <p>Die Würde des Menschen ist […]</p> </article> <article id="artikel2"> <h1><a href="#artikel2">Freiheit der Person</a></h1> <p>Jeder hat das Recht auf […]</p> </article> <article id="artikel3"> <h1><a href="#artikel3">Gleichheit vor dem Gesetz</a></h1> <p>Alle Menschen sind […]</p> </article>Damit erledigt sich dein Gestaltungsproblem von selbst.
\0
-