Einfache Navigation mit CSS3 ohne Hintergrundbilder

Gestalte Deine eigene Navigation ohne Hintergrundbilder mit reinem CSS. Vorlage ist ein einfaches HTML-Menü in Listenform.

HTML-Quellcode:

<nav>
<ul>
<li><a id="Home" class="first" href="#">Home</a></li>
<li><a id="Unternehmen" href="#">Unternehmen</a></li>
<li><a id="Produkte" href="#">Produkte</a></li>
<li><a id="Service" href="#">Service</a></li>
<li><a id="Kontakt" class="last" href="#">Kontakt</a></li>
</ul>
</nav>

Mit Hilfe von CSS3 wird nun das Menü in Form gebracht. Für den Hintergrundverlauf helfe ich mir gerne mit dem Ultimate CSS Gradient Generator. Mit diesem Tool kann man sich den gewünschten Verlauf – ähnlich wie in Photoshop erstellen und das Beste – einfach den Quellcode kopieren. Ein weiteres hilfreiches Tool für CSS3-Dateien ist derCSS-Generator. Attribute wie ‚border-radius‘, ‚text-shadow‘, ‚box-shadow‘ etc. können mit Hilfe eines Wysiwyg-Editors getestet und anschließend der Code in die Zwischenablage kopiert werden.

CSS-Datei:

nav ul { /* Anpassung der Liste */
	list-item: none;
	width: 940px;
	height: 40px;
	margin: 0 auto;
	            border-radius: 8px;
           -moz-border-radius: 8px;
       -webkit-border-radius: 8px;
                      box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
	    -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
	background: #35aae0; /* Old browsers */
	background: -moz-linear-gradient(top, #35aae0 0%, #006699 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #35aae0), color-stop(100%, #006699)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #35aae0 0%, #006699 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #35aae0 0%, #006699 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #35aae0 0%, #006699 100%); /* IE10+ */
	background: linear-gradient(to bottom, #35aae0 0%, #006699 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35aae0', endColorstr='#006699', GradientType=0 ); 
}
nav ul li { /* die Listenpunkte sollen sich horizontal ausrichten */
	float: left;
	display: inline-block;
}
nav ul li a { /* Nun werden die Menüpunkte formatiert, die Ränder links und rechts erzeugen den Trenner */
	display: block;
	color: #fff;
	padding: 0 20px;
	width: auto;
	line-height: 40px;
	font-size: 18px;
	text-transform: uppercase;
	border-right: 1px solid rgba(256, 256, 256, 0.4);
	border-left: 1px solid rgba(0,0,0,0.3);
	text-decoration: none;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.6);
}
nav ul li a:hover { /* Der Hover-Effekt wird erzeugt */
	background: #2a95c6; /* Old browsers */
	background: -moz-linear-gradient(top, #2a95c6 0%, #67bbe2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2a95c6), color-stop(100%, #67bbe2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #2a95c6 0%, #67bbe2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #2a95c6 0%, #67bbe2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #2a95c6 0%, #67bbe2 100%); /* IE10+ */
	background: linear-gradient(to bottom, #2a95c6 0%, #67bbe2 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a95c6', endColorstr='#67bbe2', GradientType=0 );
}
nav ul li a.first, nav ul li a:hover.first { 
        /* Der erste Menüpunkt wird mit Hilfe einer CSS-Klasse angepasst. Ohne Trenner am Anfang */
	border-left: none;
	        border-radius: 8px 0 0 8px;
	   -moz-border-radius: 8px 0 0 8px;
	-webkit-border-radius: 8px 0 0 8px;
}

Live-Preview 
Code-Beispiel downloaden…