Apple ist unbestritten eine der Firmen, welche auch im Bereich Webdesign immer wieder Maßstäbe setzt. Mit zu den coolsten Dingen auf der Webseite der Firma gehört zweifellos das Navigationsmenü. Wie dieses fast ohne Grafiken ziemlich detailgetreu nachgebaut werden kann, erklärt dieses Tutorial Schritt für Schritt.

Das Originalmenü

Apple style Navigationmenü – die Vorbereitungen

Demoseite mit der Apple Navigation | Download aller nötigen Dateien

Erstellen der Hintergrundgrafik

Wir erstellen in Photoshop eine neue Datei mit den folgenden Einstellungen:

Zur besseren Orientierung bei der nun folgenden Arbeit erstellen wir über “Ansicht” —> “Neue Hilfslinie” eine neue horizontale Hilfslinie.

Nun markieren wir mit dem Auswahlrechteck-Werkzeug die oberen 40px und füllen diese mit irgend einer Farbe.

Mit dem Verlaufwerkzeug verpassen wir der markierten oberen Hälfte unserer Grafik nun einen Verlauf mit den folgenden Farben ein:

Für den unteren Bereich nutzen wir nun das Rechteck-Werkzeug und füllen damit nun die freie Fläche. Der nun entstandenen “Form 1” verpassen wir wieder einen Verlauf, diesmal mit folgenden Einstellungen:

Die untere Fläche schieben wir nun mit dem “Verschieben-Werkzeug” einen Pixel nach unten und speichern die Grafik als .png ab.

Das HTML und CSS

Der nötige HTML Code

Der für unser Menü nötige HTML-Quellcode ist ziemlich einfach und unspektakulär gehalten.

<ul id="nav">
<li class="first"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Archive</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Contact</a></li>
<li class="last"><form action="#" method="get">
<p><input type="text" class="navsearch" size="15" name="q" onblur="if(this.value=='') this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue) this.value='';" value="Search..." /></p>
</form></li>
</ul>

Das CSS – denn Design ist alles

/* Apple like Navigation */
#nav_wrapper { width: 100%; margin: 15px 0 20px 0; position: relative; height: 40px; padding: 0;}
#nav { padding: 0; line-height: 40px; width: 990px; margin: 0 auto; height: 40px; }
#nav, #nav ul { z-index: 100;}
#nav li { float: left; margin: 0; padding: 0; list-style: none; height: 39px;  background-image: url(images/nav_bg.png); background-repeat: repeat-x; background-position: 100% 0%; border-left: 1px solid #777; }
#nav li:hover { background-repeat: repeat-x; background-position: 0% 100%;}
#nav li:hover a { color: #fff; text-shadow: 0 -1px 0 #000;}
#nav li.first { border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px 0 0 4px; border-left: none;}
#nav li.last { border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0 4px 4px 0;}
#nav li.last:hover { background-repeat: repeat-x; background-position: 100% 0%;}
#nav li a { padding: 0 25px; text-decoration: none; color: #262626; font-size: 13px; font-weight: 600; display: block; text-shadow: 0 1px 0 #eee; position: relative; line-height: 39px;}
#nav li a:hover, #nav li a:active, #nav li a:focus { color: #fff; text-shadow: 0 -1px 0 #000; }
/*  Site Search */
input.navsearch {  background: #fff url(images/search.png) no-repeat center left;border: 1px solid #888; font:12px "Lucida Grande",Arial,Sans-serif; padding:5px 5px 5px 20px; width:140px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; height: 12px; position: relative; top: 8px; margin: 0 10px;}

Demoseite mit der Apple Navigation | Download aller nötigen Dateien (Downloads: 182)

Fazit

Ein solches Navigationsmenü lässt sich also recht schnell und mit wenig Aufwand erstellen. Angezeigt wird es in allen modernen Browsern korrekt, nur der Internet Explorer (egal welcher) tut es nicht.

Ich wünsche viel Spaß beim herum experimentieren.

Diesen Artikel als PDF Speichern

Andreas Hecht

Andreas Hecht ist Gründer und CEO des Startups Hecht MediaArts Webdesign und Systemadministrator mit den folgenden Microsoft Zertifizierungen: MCP, MCSA, MCSA Messaging, MCSE, MCTS und dem Cisco CCNA Zertifikat.

Website RevolutionThemes - Premium WordPress Themes | Folge ihm auf Twitter

Danke, dass Du diese Seite ausgedruckt hast! Bitte besuche uns gerne wieder, um weitere hilfreiche Artikel zu lesen.