WordPress & Webwork - perun.net

CSS3: horizontale und vertikale Navigation mit :target

Von am 22. 02. 2012 um 22:43

Ich habe heute ein Beispiel erwähnt, wo man lediglich mit CSS3 und :target eine recht einfache, aber dennoch ansehnliche Bilder-Galerie erstellen kann.

Auf Sitepoint habe ich noch zwei weitere interessante Beispiele mit :target entdeckt. Beim ersten Beispiel wurde eine horizontale Tab-Navigation umgesetzt:

Tab-Navigation mit CSS3

Da ganze funktioniert (siehe Demo) in Firefox, Chrome, Safari, Opera und dem Internet Explorer ab Version 9. Die Tabs wurden so umgesetzt das man auch den Browserverlauf nutzen kann: man kann mit den Vor- und Zurück-Taste des Browser entsprechend in den Tabs vor und zurück gehen.

Das zweite Beispiel ist eine vertikale Navigation mit einem sog. Akkordeon-Effekt. Dies funktioniert (Demo) ebenfalls in Firefox, Chrome, Safari, Opera und dem Internet Explorer ab Version 9.

Diesen Artikel weiterempfehlen oder später lesen:

auf Kindle (später) lesen

Premium WordPress Themes

Verwandte Artikel:

Kategorien:
HTML & CSS
Tags:
,  
Beitrag:
Trackback-Adresse und die Druckvorschau
Kommentare:
Kommentare verfolgen oder Kommentar abgeben

 — 

3 Kommentare »»

  1. 1. – Dirk

    Kommentar vom 23.02.2012 um 01:06

    Hi Vladimir … wirklich sinnvoll finde ich die CSS3 Tabs nicht, denn die haben einige nicht zu verachtende Probleme. Ich habe dazu erst vor wenigen Tagen was zusammengeschrieben: https://plus.google.com/100401066213699689411/posts/eAuCbc7tdow

  2. 2. – Vladimir

    Kommentar vom 23.02.2012 um 02:03

    Hallo Dirk,

    vielen Dank für den Hinweis.

  3. 3. – Nico

    Kommentar vom 24.02.2012 um 14:52

    Sehr gut. Damit muss ich endlich keine aufwändigen JavaScript Sachen einbinden.

Hinweis:
WordPress 3.5 für Autoren & Redakteure (pdf)
Ausdruckbar, Volumenlizenzen zu sehr fairen Preisen.

Einen Kommentar hinterlassen




XHTML (folgende Tags sind erlaubt): <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . Kommentar-Vorschau ist aktiviert (Javascript wird benötigt).

Code-Beispiele: damit die Code-Beispiele richtig angezeigt werden müssen die Sonderzeichen maskiert werden (z. B. < zu &lt;).

Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.