Pages Menu
TwitterRssFacebook
Categories Menu

Gepostet on Feb 28, 2013 in Wordpress | Keine Kommentare

CSS: Navigationsmenü mit Nachglüheffekt bauen

CSS: Navigationsmenü mit Nachglüheffekt bauen

Mit Hilfe von CSS3 ist es mittlerweile recht simpel geworden, die eigene Navigation mit tollen Effekten auszustatten. Einer dieser Effekte ist der Nachglüheffekt, der eine feine Spur auf dem Element hinterlässt, wenn der Mauszeiger dieses wieder verlässt. Diesen Effekt für das eigene Navigationsmenü wollen wir heute einmal nachbauen.

Mit ein wenig CSS ist dieser Effekt schnell bewerkstelligt.

Zu Beginn erstellen wir uns eine Liste mit einigen Navigationselementen. Dieser Liste ordnen wir die Class Navi zu:

       <ul class="Navi">
			<li><a href="">Home</a></li>
			<li><a href="">Welpen</a></li>
			<li><a href="">Katzen</a></li>
			<li><a href="">Hamster</a></li>
			<li><a href="">Meerschweinchen</a></li>
		</ul>

Das war es dann bereits mit dem html-Teil des Dokuments. Widmen wir uns nun dem Hauptteil: dem CSS.

Zu Beginn justieren wir einige globale Einstellungen und stellen den Listtype auf none um.

html * {
	padding: 0;
	vertical-align: baseline;
	text-decoration: none;
}
li{
	list-style: none;
}

Die Einstellungen für den Body.

body{
	font-family: Helvetica, Arial, sans-serif;
	background-color: #fff;
	}

Dann folgen die Breite, die wir hier auf 190px festlegen, und der Hintergrund des ul-Elementes.

ul{
	width: 190px;
	background-color: #FAFAFA;
	}

Jetzt sorgen wir mittels block dafür, dass die Schaltflächen zu Blöcken ernannt werden. Dann definieren wir Breite, Padding und Margin. Zu guter Letzt kommt die Textfarbe sowie eine Border am unteren Rand hinzu.

li a{
	display: block;
	color: #1AB58A;
	width: 156px;
	padding: 3px 4px;
	margin: 5px 13px;
	border-bottom: 1px double #1AB58A;
}

Nun wird es bereits spektakulärer indem ein Rollover hinzukommt. Hintergrund und Textfarbe werden definiert und die Transition wird auf eine hundertstel Sekunde festgelegt.

.Navi li a:hover, .Navi li a.selected{
	background-color: #1D3C42;
	color: #fff;
    -moz-transition: background-color 0.03s;
    -webkit-transition: background-color 0.03s;
    -o-transition: background-color 0.03s;
    transition: background-color 0.03s;
}

Nun fügen wir mit ease-in noch eine Leuchtspur hinzu, die dem Ganzen einen Hauch Eleganz verleiht.

li a{
	display: block;
	color: #1AB58A;
	width: 156px;
	padding: 3px 4px;
	margin: 5px 13px;
	border-bottom: 1px double #1AB58A;

    -moz-transition: background-color .4s ease-in;
    -webkit-transition: background-color .4s ease-in;
    -o-transition: background-color .4s ease-in;
    transition: background-color .4s ease-in;
}

Viel Erfolg bei der Umsetzung.

Ein Beispiel für diese tolle und simple Technik können Sie hier bei GraphiteDesign bewundern.

Kommentar absenden

Deine E-Mail-Adresse wird nicht veröffentlicht.

  • RSS
  • Facebook
  • Google+
  • Twitter
  • Pinterest