Dynamische Stildefinitionen
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Die Stildefinitionen für ein Element sollen sich ändern, wenn der Benutzer einen Link anklickt.
Lösung
Zuerst versehen Sie das Markup im Dokument mit ganz normalen Links. Für diese Lösung wurden die Links auf Anker im gleichen Dokument (Fragment Identifier) in einer Imagemap definiert:
<img src="target_header.jpg" alt="Header" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="115,136,72" href="#mark" />
<area shape="circle" coords="244,145,55" href="#jessica" />
<area shape="circle" coords="340,88,58" href="#trueman" />
<area shape="circle" coords="480,287,79" href="#katrina" />
</map>
<div class="bios">
<dl id="katrina">
<dt>Katrina</dt>
<dd>...</dd>
</dl>
<dl id="jessica">
<dt>Jessica</dt>
<dd>...</dd>
</dl>
<dl id="trueman">
<dt>Trueman</dt>
<dd>...</dd>
<dl id="mark">
<dt>Mark</dt>
<dd>...</dd>
</dl>
</div>Danach erstellen Sie die CSS-Regeln für die Standardstile der Webseite (siehe nächste Abbildung):
.bios dt {
font-weight: bold;
}
.bios dd {
margin: 0;
padding: 0;
}
Abbildung: Die Standarddarstellung der Webseite.
Verwenden Sie dann die Pseudoklasse :target, um das Aussehen der Elemente zu bestimmen, wenn der Benutzer einen der Links anklickt (siehe nächste Abbildung):
.bios dl:target {
background-color: #999999;
border: 1px solid black;
padding: 1em;
font-weight: bold;
line-height: 1.5;
}
.bios dl:target dt {
font-style: italic;
color: white;
font-size: 1.5em;
background-color: #cccccc;
margin-right: 20px;
}
.bios dl:target dd {
margin-right: 20px;
background-color: #cccccc;
padding: 0 1em 1em 1em;
}
Abbildung: Für den Teil der Webseite, der sich mit Katrina befasst, wurden die Stildefinitionen geändert.
Um das Element wieder in den Ursprungszustand zu versetzen, wenn der Benutzer einen anderen Link anklickt, verwenden Sie die verneinende (negierte) Pseudoklasse :not (siehe folgende Abbildung):
.bios dl:not(:target) {
border: none;
padding: 0;
font-size: .8em;
}
Abbildung: Wird ein anderer Link angeklickt, wird der Teil der Webseite, der sich mit Katrina befasst, wieder im Standardstil angezeigt.
Diskussion
Die Pseudoklassen :target und :not sind Teil der Spezifikation für CSS 3 und daher vielen Webdesignern und Browsern noch nicht bekannt. Diese Selektoren können die Arbeit von Entwicklern jedoch stark erleichtern.
CSS-basierte aufklappbare Navigationsmenüs ohne JavaScript
Wenn Sie diese Selektoren verwenden, kann die JavaScript-basierte Lösung aus dem Rezept Aufklappbare Navigationsmenüs durch ein paar zusätzliche CSS-Regeln ersetzt werden. Hierfür müssen Sie Ihrem Markup-Code einen Anker-Link hinzufügen:
<h5><a href="#menulink">Interessante Links</a></h5>
<ul id="menulink">
<li><a href="http://www.ora.com/">O'Reilly</a></li>
<li><a href="http://www.slashdot.org/">Slashdot</a></li>
<li><a href="http://www.apple.com/">Apple</a></li>
<li><a href="http://www.microsoft.com/">Microsoft</a></li>
<li><a href="http://www.mozilla.org/">Mozilla</a></li>
</ul>Jetzt brauchen Sie noch die entsprechenden CSS-Regeln:
/* Standarddarstellung */
ul#menulink {
display: none;
}
/* nach dem Anklicken */
ul:target {
display: block;
}
/* zurück zum Ausgangszustand */
ul:not(:target) {
display: none;
}Gegenwärtig wird die Pseudoklasse (und damit reine CSS-basierte, aufklappbare Navigationsmenüs) von Firefox, Mozilla, Safari und Internet Explorer 7 für Windows unterstützt.
Siehe auch
Die CSS 3-Spezifikation zur Pseudoklasse :target.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln