CSS :target – Tab-Navigation aus Sprunglinks in Überschriften
Mittwoch, 24 März 2010 11:52 MET
- dieser Artikel
- CSS :target – Tab-Navigation aus Sprunglinks in Überschriften [hyperkontext | Weblog]
- Kommentare 2
Versteckspiele
In der Regel werde ich nicht vom Verlangen getrieben, alles Mögliche auf einer Webseite verstecken zu wollen, nur um es durch Klickaktionen wieder sichtbar machen zu können.
Mittlerweile fühle ich mich auf manchen Sites wieder um mindestens 10 Jahre zurückversetzt.
Wenn wir zum Beispiel ständig die Entscheidung zur Vorauswahl treffen müssen, welchen versteckten Bereich wir nun anklicken wollen, vergessen wir mitunter, was wir eigentlich suchten.
Um das Designer-Ego zu befriedigen geht ein Akkordeon-Menü dann nicht nur auf, sondern schiebt sich in gefühlten zwei Sekunden gemächlich auseinander. Für den First-Use-Wow-Effekt ganz toll, später nur mehr lästig.
Es scheint wieder cool zu sein, uns augenscheinliche Inhalte über mehrere unserer Sinne näher bringen zu wollen. Eine Art von falsch verstandener Augmented Reality, wie das jetzt in Denglisch heißt.
Im Grunde gibt es wenig Anlässe, (bereits geladene) Seitenbereiche erst durch Mausklick sichtbar zu machen:
- Zum Beispiel auf jeder Seite wiederholende Bereiche, die selten gebraucht werden und für die meisten verständlich sind (Adressen, Kontaktformular).
- Oder eindeutige Ziele, die keine Vergleiche zu den übrigen Optionen brauchen.
Verstecken als Erleichterung
Ich hatte mal eine interne Webandwendung, in der es um Daten zu bestimmten Produkten ging. Es gibt eine Produktgruppe mit gemeinsamen Merkmalen und daran schließen sich spezielle Daten zu den Versionen eines Typs.
Fachleute wissen beim Betrachten einer Gruppe genau, welche spezielle Angaben sie jetzt brauchen.
Das heißt, die gleichzeitige Sichtbarkeit aller Spezialdaten zu verschiedenen Untertypen ist nicht notwendig, für die Benutzergruppe aus Fachleuten sogar lästig.
Eine Produktseite wurde daher wie folgt aufgebaut:
- Allgemeine Beschreibung der Produktgruppe im Fließtext.
- Eine Liste mit Angaben die auch alle Untergruppen betreffen.
- Daran anschließend eine Definitionsliste, welche die Typenbezeichnungen als Definition-Term enthält und in der Definitionsbeschreibung die jeweils zusätzlichen Angaben.
In diesem speziellen Fall gestaltete ich die in Punkt 3 erwähnte Definitionsliste als so genanntes Akkordeon-Menü. Die Sprunglinks in die jeweiligen Definitionsausdrücke eingebettet, mit CSS (Cascading Style Sheets) versteckt und bei Klick durch die Pseudoklasse :target sichtbar gemacht. Ohne Javascript. Etwa so, wie auf der Seite meiner Blogempfehlungen auf dieser Site.
Ausgabegeräte die :target nicht verstehen, bekommen die gesamte Information komplett präsentiert. Diese Feinheit wird von Benutzern in der Regel, ohne vergleichende Ansicht mit anderen Programmen, nicht einmal bemerkt.
Versteckspiel mal anders
Unlängst kam mir die Idee, mit diesem Ansatz – also ohne einer zusätzlichen Liste mit Sprungverweisen – eine horizontale Navigation aus Überschriften oder Definitionen zu probieren.
Resultat: Es ist machbar.
Der Vorteil ist ohne Zweifel, dass es für zwei oder drei anspringbare Bereiche innerhalb einer Seite keine extra Sprungnavigation braucht und der Sprunglink einfach die anzuspringende Überschrift oder der Definition-Term ist.
Die Einschränkungen:
- Da die Naviagationspunkte absolut positioniert werden, muss die Position bei horizontaler Leiste für jeden Menüpunkt im CSS extra notiert werden. Diese Darstellung ist also nur für wenige Menüpunkte geeignet.
- Für ein CMS-Template ist es daher nur mit ausgefuchsten Tricks geeignet, aber möglich.
- Ich fand bis jetzt (ohne Javascript) keinen Weg, den ersten Punkt auch ohne Ankerangabe als Default anzuzeigen.
2 Beispiele als Demo
Es scheint also mit praktischen Einschränkungen zu funktionieren, ohne gesonderte Navigationsliste eine horizontale Navigation für seiteninterne Sprunglinks aus Überschriften oder Listenpunkten zu kreieren.
Auf den ersten Blick sieht die Sache nicht spektakulär aus. Der Sinn erschließt sich vermutlich nur erfahreneren CSS-Fricklern.
Ich habe zwei Beispiele auf der Demoseite erstellt:
-
Da ich nicht mit schnöden Produktbeschreibungen langweilen will, habe ich mir auszugsweise die Versionsgeschichte des Internet Explorer aus der Wikipedia als erstes Beispiel ausgesucht und pro Version einen navigierbaren Abschnitt erstellt. Die Frage der Sinnhaftigkeit, jede Version einzeln anzuklicken, stelle mir bitte niemand.
-
In vielen Blogs gibt es diese Tableisten, wo zum Beispiel abwechselnd die Schlagwörter, die letzten Beiträge, die letzten Kommentare oder RSS-Feeds angezeigt werden. Üblicherweise werden die mit Javascript realisiert und manchmal mit so miesen Scripts, die dir ohne JS oder mit Tastatur die Menüpunkte verweigern.
An solch einer Tableiste habe ich mich im zweiten Beispiel versucht.
Anmerkungen für CSS-Interessierte
Im Beispiel sind viele Klassen mit dem Zusatz :not(:target) versehen – auf den ersten Blick unnötig.
Die Logik:
Browser welche die Pseudoklasse :target nicht verstehen, verstehen auch nicht die Negation :not(:target). Damit können wir auf einfache Weise steuern, welche Anweisungen wir Programmen vorenthalten, die das sowieso nicht verstehen (zum Beispiel dem IE) und denen einfach den gesamten Text auf einmal zeigen.
Die Dreieckspfeile im ersten Beispiel werden in einer Pseudoklasse :before beziehungsweise :after mit border kreiert. Die Inspiration mit den Dreiecken bot mir dieser Artikel: Creating Triangles in CSS [Jon Rohan].
Die allgemeine Inspiration und den Ehrgeiz, eine Tab-Navigation ohne zusätzliche Sprungliste zu erstellen, gab mir Chris Coyier mit einem Beitrag, in dem er Varianten mit Sprunglinks probiert. Alle verwenden jedoch immer eine gesonderte HTML-Navigationliste zu den Sprungzielen und der Anzeigebereich ist absolut positioniert – auch das wollte ich vermeiden.
- Abschnitt 1 von 1
Externe Verweise dieses Artikels wurden zuletzt am 23. März 2010 auf Relevanz geprüft.
- Datum:
- veröffentlicht am 24 März 2010, 11:52 MET.
- Artikel:
- CSS :target – Tab-Navigation aus Sprunglinks in Überschriften [hyperkontext | Weblog]
- Kurz-URL:
- http://hyperkontext.at/s/252
- Thema:
- Webgestaltung
- Stichworte:
- CSS
- Reaktionen:
- Kommentare 2
Dieser Artikel bezieht sich intern auf frühere Einträge:
- Pseudoklasse :target in CSS-3 vom 28. Februar 2008
Mögliche themenverwandte Artikel aus dem Weblog
Blättern (chronologisch)
- « neuerer Artikel
- CSS3 text-overflow und word-wrap: Text beschneiden oder Wörter umbrechen
- älterer Artikel »
- Buchrezension: Praxisleitfaden Enterprise 2.0
Lüge als Prinzip 