Antworten auf deine Fragen:
Neues Thema erstellen

Horizontale Navigation mit Grafiken & Hover

MelanieCibura

Noch nicht viel geschrieben

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

Aktives Mitglied

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

offline

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

Hat es drauf

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

Aktives Mitglied

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

localhorst

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

Noch nicht viel geschrieben

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

Hat es drauf

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben