do you need design? Get in touch! • Subscribe the RSS Feed or follow me on Twitter

Fortgeschrittenes CSS Menü

13. November 2008 — Tutorials — 14 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

Tags: , ,
Gelesen: 4106 · today: 2 · last: 15. March 2010

14 Kommentare • Eintrag schreiben

  1. 13. November 2008

    #1 Tina Coric

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



    ""zitieren"

  2. 13. November 2008

    #2 David Hellmann

    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.



    ""zitieren"

  3. 13. November 2008

    #3 Dave

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



    ""zitieren"

  4. 13. November 2008

    #4 Meerblickzimmer

    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



    ""zitieren"

  5. 13. November 2008

    #5 tobi

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



    ""zitieren"

  6. 13. November 2008

    #6 David Hellmann

    @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



    ""zitieren"

  7. 13. November 2008

    #7 Markus

    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



    ""zitieren"

  8. 13. November 2008

    #8 David Hellmann

    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.



    ""zitieren"

  9. 14. November 2008

    #9 Nico

    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.



    ""zitieren"

  10. 14. November 2008

    #10 David Hellmann

    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.



    ""zitieren"

  11. 06. Januar 2009

    #11 Robert

    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



    ""zitieren"

  12. 06. Januar 2009

    #12 David Hellmann

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



    ""zitieren"

  13. 06. Januar 2009

    #13 Robert

    Alles klar. Danke.



    ""zitieren"

  14. 27. Juli 2009

    #14 Alex

    Eure Tipps helfen mir sehr, danke!



    ""zitieren"

Kommentar schreiben