Horizontale Navigation mit Grafiken & Hover

[MelanieCibura]

Ich möchte eine horizontale Navigation aus einer Liste bauen.

Ich will aber keinen Text für die Links eingeben sondern immer eine Hintergrundgrafik verwenden.

Dann soll noch ein Hover-Effekt enstehten, wenn ich mit der Maus über einen Menüpunkt gehe und eine andersfarbige Grafik angezeigt werden.

Ich bekomme es nun nicht hin, das ich eine Liste habe mit unterschiedlichen großen Hintergrundgrafiken, die sich beim Hovern auch noch verändern.

Hier ist ein Beispiel wie ich es gerne hätte:

Wie gehe ich das ganze an? Nehme ich eine Grafik für die komplette Navigation oder soll ich jeden Menüpunkt einzeln als Grafik abspeichern und dann sowohl 1x normal und 1x hover und 1x activ. Habe so etwas noch nie gemacht.

Über eine hilfreiche Antwort wäre ich sehr dankbar.

Gruß,
Melanie

 

[fakerer]

AW: Horizontale Navigation mit Grafiken & Hover

einfach links mit Bildern in die li tags schmeissen.
Du kannst sowohl einzelbilder nehmen als auch ein einziges wo du dann immer die Position verschiebst.

 

[Herr_D]

AW: Horizontale Navigation mit Grafiken & Hover

Bei deinem Beispiel sehe ich keine unterschiedlichen Grafiken für die einzelnen Menuepunkte...


Du brauchst, wenn du das wie oben machen möchtest 3 Grafiken (Hintergrundbilder) bzw. wenn du css3 einsetzt nur 3 Definitionen für:

normal (ohne hover und nicht die aktuelle Seite)
offene Seiten (nicht wirklich active: das wäre bei Klick)
hover beim Drüberfahren


wenn du jetzt für jeden Menuepunkt eine andere Erscheinung haben willst, dann brauchst du Anzahl der Menuepunkte mal 3

 

[Myhar]

AW: Horizontale Navigation mit Grafiken & Hover

Bei deinem Beispiel werden aber nicht nur Bilder sondern auch normaler Text verwendet.
Warum willst du denn keinen Text verwenden? Es ist aus Sicht der Accessability nicht empfehlenswert, auf Text zu verzichten. Auch kann Google deine Bilder nicht lesen sondern sieht einfach nur leere Links.
Die Technik, die bei der von dir verlinkten Website verwendet wurde nennt sich Sliding Door.
In Kombination mit Sprites brauchst du für die Navigation nur ein Image, in dem du sowohl den 'normalen' als auch den :hover-Status hast. Dann brauchst du nur die Position des HG-Bilds wechseln.

Was Fakerer mit

einzelbilder nehmen als auch ein einziges

meinte weiß ich nicht.?

L. G.

 

[fakerer]

AW: Horizontale Navigation mit Grafiken & Hover

ganz einfach, denk ich
etweder ist das Hoverbild ein eigenes oder um Ladezeiten einzusparen ein ein doppelt so hohes Bild beide zustände und dann immer positionieren.

 

[MyBad]

AW: Horizontale Navigation mit Grafiken & Hover

Fakerer meinte damit vermutlich CSS Sprites. Das ist immer ein Bild, in dem alle Zustände abgebildet sind. Durch Verschieben der Position (des Hintergrundbildes) im CSS wird dann der jeweilige Zustand dargestellt. Das hat den Vorteil, dass nur eine Grafik anstatt 3 geladen werden müssen.

 

[MelanieCibura]

AW: Horizontale Navigation mit Grafiken & Hover

Danke für die vielen schnellen Antworten.

Ich hab es jetzt so gemacht, dass ich jeweils ein Bild mit zwei Buttons pro Navigationspunkt gemacht habe.
Dem Link in der Navigation habe ich dann ganz einfach den normalen Button in der CSS-Datei verlinkt und als :hover habe ich dem Link dann das gleiche Bild mit verschobener Position zugewiesen.

Hat auch alles so geklappt, wie ich es haben wollte.

Danke für eure Hilfe, hat mir sehr geholfen.

Lg, Melanie

 

[Myhar]

AW: Horizontale Navigation mit Grafiken & Hover

ganz einfach, denk ich
etweder ist das Hoverbild ein eigenes oder um Ladezeiten einzusparen ein ein doppelt so hohes Bild beide zustände und dann immer positionieren.

Danke jetzt habe ich es auch verstanden. Ich hab gestern 'einzelnes Bild' statt Einzelbilder gelesen... Aber zum Glück sind jetzt alle Unklarheiten beseitigt und das Problem gelöst.