Ein CSS Menü ist ja nun nicht so der Fortschritt aber das ganze mittels einer einzelnen Grafik zu lösen ist schon etwas anspruchsvoller. Wo wir auch schon beim Thema wären, es geht darum eine Navigation zu bauen wo nur eine Grafik benötigt wird diese aber einen Normalzustand, einen Hoverzustand und einen Aktivzustand hat. Wer das alles schon kann der kann hat Glück gehabt, alle anderen könnten es sich ja mal anschauen da es eine schöne Methode ist.
LIVE DEMO
DOWNLOAD
Diese hier ist nicht transparent, es soll hier nur verdeutlicht werden wie die Grafik aussieht.
Ein Recht simpler Aufbau hier. Eine Liste mit fünf Listenpunkten die die jeweiligen Navigationspunkte darstellen. Jeder hat eine eigene "klasse" (man könnte auch ID's nutzen) und wenn man auf der jeweiligen Seite ist wird der klasse eine zweite zugewiesen die angibt das der Aktivstatus abgerufen werden soll. Der Rest ist einfach der Link und der Text der zwischen dem Link-Tag steht wird nicht angezeigt (kommen wir noch im CSS Teil drauf zu sprechen).
1 2 3 4 5 6 7 | <ul id="main-navi"> <li><a class="start start-akt" href="index.html">Start</a></li> <li><a class="portfolio" href="index.html">Portfolio</a></li> <li><a class="blog" href="index.html">Blog</a></li> <li><a class="about" href="index.html">About</a></li> <li><a class="contact" href="index.html">Contact</a></li> </ul> |
Hier gibt es schon ein wenig mehr zu schreiben aber wenn man es sicher genauer anschaut sieht man das es im Grunde immer das gleiche ist und sich nur immer ein paar Werte ändern. Aber geschrieben muss es trotzdem werden. Sollte im Grunde alles selbsterklärend sein. Zwei Sachen die vielleicht nicht jedem klar sind habe ich mit Kommentaren versehen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | ul#main-navi { width:650px; height:429px; float:left; padding:79px 0 0 340px; background:url(../images/head.jpg) left top no-repeat; } ul#main-navi li { float:left; margin:0 10px 0 0; } ul#main-navi li a.start , ul#main-navi li a.portfolio , ul#main-navi li a.blog , ul#main-navi li a.about , ul#main-navi li a.contact { display:block; height:60px; text-indent:-9999px; /* verschiebt den nach links das er nicht sichtbar aber dennoch da ist */ } ul#main-navi li a.start { background:url(../images/main-navi.png) -20px 0 no-repeat; /* erster Wert ist von Links und der zweite Wert von oben gerechnet */ width:91px; } ul#main-navi li a.start:hover { background-position:-20px -60px; } ul#main-navi li a.start-akt { background-position:-20px -120px; } ul#main-navi li a.portfolio { background:url(../images/main-navi.png) -119px 0 no-repeat; width:141px; } ul#main-navi li a.portfolio:hover { background-position:-119px -60px; } ul#main-navi li a.portfolio-akt { background-position:-119px -120px; } ul#main-navi li a.blog { background:url(../images/main-navi.png) -270px 0 no-repeat; width:103px; } ul#main-navi li a.blog:hover { background-position:-270px -60px; } ul#main-navi li a.blog-akt { background-position:-270px -120px; } ul#main-navi li a.about { background:url(../images/main-navi.png) -384px 0 no-repeat; width:101px; } ul#main-navi li a.about:hover { background-position:-384px -60px; } ul#main-navi li a.about-akt { background-position:-384px -120px; } ul#main-navi li a.contact { background:url(../images/main-navi.png) -496px 0 no-repeat; width:101px; } ul#main-navi li a.contact:hover { background-position:-496px -60px; } ul#main-navi li a.contact-akt { background-position:-496px -120px; } |
Ganz klar der, dass man nur eine Grafik verwenden muss und diese auch nur einmal geladen werden muss. Man hat keine hänger wenn man mit der Maus über das Menü geht da die Grafik ja schon beim ersten Laden der Seite mitgeladen wird und dann immer nur verschoben wird. Das ganze wird auch übersichtlicher da man nur noch eine Grafik hat die man bei Bedarf anpassen muss und nicht mehr ein oder zwei Hände voll Grafiken.
Wenn man es wirklich mal ändern muss das Menü dann muss man ein wenig am CSS basteln falls sich irgendwelche Größen geändert haben sollten. Sonst kann ich keine weiter feststellen. Wer welche kennt kann diese ja Lautstark in den Kommentaren preis geben.
Vielleicht war es ja dem ein oder anderen Hilfreich...
LIVE DEMO
DOWNLOAD
Ich hab diese Technik vor ein paar Monaten durch Zufall bei Xing entdeckt, die haben sogar ALLE Grafiken der Startseite in einer Datei: https://www.xing.com/img/s/common_r5.png.
Das waren noch Zeiten als man ein Design in Photoshop gesliced hat, und dann 5459 Gif-Dateien hatte, die mittels Tabellen zusammengehalten wurden ;-))
Hehe, das ist natürlich auch nicht schlecht. Wobei ich das dann schon wieder eine Spur zu krass finde aber möglich ist es ja wie man sieht.
Danke für diesen Artikel. Man lernt ja nie aus ;-)!
Versteh nicht ganz warum die Navi-Elemente so weiter verteilst und dann für jedes Elemente und jeden Zustand neu bg-positon finden musst. Hau doch einen Zustand aller Elemente horizontal nebeinander und die drei Zustände dann unter einander. Das ergibt quasi 3 horizontale Menus die dann relativ global mit nem bg-position und nem verschieben nach oben/unten zu regeln ist. Da macht ein späteres update bissl weniger Arbeit.
Gruss. M
Sehr schöner, praktischer Beitrag! Mal gucken wie man das beim nächsten Website-Projekt mit einbinden kann!!! ;-)
@Meerblickzimmer
jo stimmt :) Wäre auch ne Möglichkeit. Geht ja beides sehr gut. Bei deiner Möglichkeit wären es halt paar Zeilen CSS weniger. Beim nächsten mal, hehe
naja grafische menüs haben immer nachteile… vorallem wenn man ein cms nützen will! so muss der kunde jedesmal anrufen… aber ansonsten nette technik
Es kommt halt immer drauf an. Wenn man weiss man hat eine feste Navigation dann kann man das schon mit Grafiken erledigen. Ich bin auch kein Fan für alles Grafiken zu nutzen und versuche weitestgehens alles so zu lösen aber ab und zu darf es dann schon mal eine sein.
ul#main-navi li a.start:hover {
background-position:url(../images/main-navi.png) -20px -60px;
}
… ist aber nicht ganz korrekt. Entweder „background“ und mehrere Angaben wie „url(…)“ oder „background-position“ – dann aber auch nur die Position. Die Kombination sollte nur aufgrund der Fehlertoleranz des Browsers funktionieren.
Vorschlag:
ul#main-navi li a {
background: url(../images/main-navi.png);
}
und dann für alle einzeln nur die Position:
ul#main-navi li a.start {
background-position: -20px -60px;
}
usw.
@Tina Coric das habe ich auch schon (noch extremer) angewendet. Spart wirklich Ladezeit, aber erfordert viel Planung und CSS-Fummlerei (besonders IE6). Ein zusätzlicher Server ist evtl. billiger, als sich die Mühe zu machen.
Jo vollkommen richtig :) Im Demobeispiel ist es auch richtig und auch in der ZIP. Habs hier nun auch noch geändert. Beim COPY / PASTE geschlammt :/
Danke!
Finde das wie gesagt auch nicht praktisch. Die Zeit die man da an CSS gebastel reinsteckt rechtfertigt denke ich nicht die Zeit die beim laden gespart wird. Man könnte bei XING zum Beispiel wenigstens splitten, Icons, Navi etc.
Sehr interessante Hinweise. Ich hatte es auf ähnliche Art und Weise gelöst, allerdings ist mir nicht ganz klar, wie Du das ins WordPress integriert hast mit der Weitergabe der jeweiligen “*-akt Klasse”. Hast Du die current_page_item-Class genommen? Da ist bloß der Unterschied, dass die sich nciht auf den Link, sonder auf die Liste beziehen. Für einen Tip wär ich dankbar.
Grüße vom Robert
Ich hab das mit den aktivpunkten mit dem Plugin “is_subpage_of” gelöst. Und mit der ein oder anderen abfrage: is_home etc. Funktioniert super :)
Alles klar. Danke.
Eure Tipps helfen mir sehr, danke!
Hey David!
Find deine Seite echt interessant und du triffst genau mein Stil ;)
Ich frage mich welche Schriftart du für die Menüpunkte bei diesem Tutorial verwendet hast.
Gruß
Hi. Danke für den Tipp.
Wie sieht es mit zusätzlichen Menüpunkten als Dropdown unterhalb der Hauptpunkte aus? Z.B. Portfolio mit den Unterpunkten “Web” und “Print”?
Zitat Andy ↑:
Hi. Danke für den Tipp.
Wie sieht es mit zusätzlichen Menüpunkten als Dropdown unterhalb der Hauptpunkte aus? Z.B. Portfolio mit den Unterpunkten “Web” und “Print”?
Ist sicherlich möglich :) Oder was meinst du jetzt speziell?
