Viele Navigationen nutzen mittlerweile jQuery, um Hover-Effekte zu realisieren. Das soll auch weiterhin so sein. Immerhin ist die Vielfalt der vorhandenen Möglichkeiten und Effekte ziemlich umfangreich.

Aber warum nicht auch mal nach Alternativen Ausschau halten?

CSS 3 ist zwar in vielerlei Hinsicht noch weit von einem REC-Level entfernt, das durch das W3C festgelegt wird, aber einige Dinge funktionieren schon jetzt ziemlich zufriedenstellend (sieht man mal vom IE ab).
So bieten die Befehle „transition“ und „transform“ ein paar nette Eigenschaften, auch im 3-Dimensionalen-Bereich ein wenig herumzuexperimentieren. Mit ihnen lassen sich sogenannte „Card-Flip-Effekte“ umsetzen, wie man auf der Seite von CSS 3 Playground bestaunen kann.

Inspiriert durch diese Möglichkeiten, habe ich mir meine Gedanken gemacht, ob man diesen Effekt nicht auch für ein Navigationsmenü hernehmen könnte.
Lange Rede, kurzer Sinn, ich habe es einfach ausprobiert und hier ist das Ergebnis. Die hier aufgeführten Beispiele laufen momentan nur in aktuellen Webkit- (Safari, Chrome) oder Mozilla- (Firefox) Browsern. Für den IE oder Opera muss weiterhin auf eine jQuery-Lösung zurückgegriffen werden.

Hier geht´s zur Demo:
DEMO

Der Code setzt sich wie folgt zusammen.

Zuerst der CSS-Code

/* containerbox */
nav#container {
	width: 500px; height: 25px;
	margin: 100px auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11pt;
	border-bottom: 3px solid #83d0f5;
}

/* vorderseite */
div#pos_one,
div#pos_two,
div#pos_three,
div#pos_four,
div#pos_five {
	float: left;
	width: 100px; height: 25px;
	color: #83d0f5;
	cursor: pointer;
}

/* rueckseite */
div#flip_one,
div#flip_two,
div#flip_three,
div#flip_four,
div#flip_five {
	width: 100px; height: 25px;
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	     -webkit-transition: -webkit-transform 1s;
	        -moz-transition: -moz-transform 1s;
}

/* card-flip-effect */
div#pos_one:hover div#flip_one,
div#pos_two:hover div#flip_two,
div#pos_three:hover div#flip_three,
div#pos_four:hover div#flip_four,
div#pos_five:hover div#flip_five {
	-webkit-transform: rotateX(180deg);
	   -moz-transform: rotateX(180deg);
}

/* vorderseite */
div.face {
	position: absolute;
	width: 84px; height: 19px;
	padding: 3px 8px;
	text-align: center;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
}

/* rueckseite */
div.back {
	display: none;
	width: 100px; height: 50px;
	margin-top: -50px; padding: 3px 8px;
	text-align: center;
	background: #83d0f5;
}

/* link rueckseite */
div.back a {
	color: #FFFFFF;
	text-decoration: none;
}

/* link rueckseite hover */
div.back a:hover {
	font-weight: bold;
}

/* zurueckdrehen des navigationspunktes */
div.face.back {
	display: block;
	-webkit-transform: rotateX(180deg);
	   -moz-transform: rotateX(180deg);
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
}

Wie man sehen kann, ist der CSS-Code ein wenig umfangreicher. Wohingegen der HTML-Code sehr übersichtlich ist.

<nav id="container">
	<div id="pos_one">
		<div id="flip_one">
			<div class="front face">Home</div><!-- .front .face -->
			<div class="back face"><a href="#">Home</a></div><!-- .back .face -->
		</div><!-- #flip_one -->
	</div><!-- #pos_one -->

	<div id="pos_two">
		<div id="flip_two">
			<div class="front face">About me</div><!-- .front .face -->
			<div class="back face"><a href="#">About me</a></div><!-- .back .face -->
		</div><!-- #flip_two -->
	</div><!-- #pos_two -->

	<div id="pos_three">
		<div id="flip_three">
			<div class="front face">My Work</div><!-- .front .face -->
			<div class="back face"><a href="#">My Work</a></div><!-- .back .face -->
		</div><!-- #flip_three -->
	</div><!-- #pos_three -->

	<div id="pos_four">
		<div id="flip_four">
			<div class="front face">Blog</div><!-- .front .face -->
			<div class="back face"><a href="#">Blog</a></div><!-- .back .face -->
		</div><!-- #flip_four -->
	</div><!-- #pos_four -->

	<div id="pos_five">
		<div id="flip_five">
			<div class="front face">Contact</div><!-- .front .face -->
			<div class="back face"><a href="#">Contact</a></div><!-- .back .face -->
		</div><!-- #flip_five -->
	</div><!-- #pos_five -->
</nav><!-- #container -->

Ich wünsche euch viel Spaß beim Nachbauen und bitte schreibt mir, wenn Ihr Verbesserungsvorschläge habt. Über Kommentare freue ich mich immer.