Fortgeschrittenes CSS Menü
2008 13 November
Kommentare 17 Kommentare

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

Die Navigations Grafik

Diese hier ist nicht transparent, es soll hier nur verdeutlicht werden wie die Grafik aussieht.

Der HTML Aufbau der Navigation

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>

Die CSS Formatierung der Navigation

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;
}

Vorteile dieser Methode

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.

Nachteile dieser Methode

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.

Das Ergebnis könnt ihr nun anschauen bzw. downloaden

Vielleicht war es ja dem ein oder anderen Hilfreich...
LIVE DEMO DOWNLOAD

17 Kommetare

  1. Tina Coric schreibt: 1 13. November 2008 • 00:30 Uhr

    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 ;-))

    Diesen Kommentar zitieren

  2. David Hellmann schreibt: 2 13. November 2008 • 00:34 Uhr

    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.

    Diesen Kommentar zitieren

  3. Dave schreibt: 3 13. November 2008 • 08:09 Uhr

    Danke für diesen Artikel. Man lernt ja nie aus ;-)!

    Diesen Kommentar zitieren

  4. Meerblickzimmer schreibt: 4 13. November 2008 • 08:33 Uhr

    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

    Diesen Kommentar zitieren

  5. tobi schreibt: 5 13. November 2008 • 09:04 Uhr

    Sehr schöner, praktischer Beitrag! Mal gucken wie man das beim nächsten Website-Projekt mit einbinden kann!!! ;-)

    Diesen Kommentar zitieren

  6. David Hellmann schreibt: 6 13. November 2008 • 09:41 Uhr

    @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

    Diesen Kommentar zitieren

  7. Markus schreibt: 7 13. November 2008 • 14:28 Uhr

    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

    Diesen Kommentar zitieren

  8. David Hellmann schreibt: 8 13. November 2008 • 14:35 Uhr

    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.

    Diesen Kommentar zitieren

  9. Nico schreibt: 9 14. November 2008 • 15:37 Uhr

    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.

    Diesen Kommentar zitieren

  10. David Hellmann schreibt: 10 14. November 2008 • 15:45 Uhr

    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.

    Diesen Kommentar zitieren

  11. Robert schreibt: 11 6. Januar 2009 • 09:02 Uhr

    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

    Diesen Kommentar zitieren

  12. David Hellmann schreibt: 12 6. Januar 2009 • 09:47 Uhr

    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 :)

    Diesen Kommentar zitieren

  13. Robert schreibt: 13 6. Januar 2009 • 09:59 Uhr

    Alles klar. Danke.

    Diesen Kommentar zitieren

  14. Alex schreibt: 14 27. Juli 2009 • 10:23 Uhr

    Eure Tipps helfen mir sehr, danke!

    Diesen Kommentar zitieren

  15. ChrizzDaFrizz schreibt: 15 14. April 2010 • 20:14 Uhr

    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ß

    Diesen Kommentar zitieren

  16. Andy schreibt: 16 10. Mai 2010 • 12:31 Uhr

    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”?

    Diesen Kommentar zitieren

  17. David Hellmann schreibt: 17 10. Mai 2010 • 16:26 Uhr

    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?

    Diesen Kommentar zitieren

Kommentar schreiben

Diese HTML Tags kannst du nutzen:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">