Navigation mit Parallelogrammen

[Der Martin]

Hallo,

Der Titel sagt eh schon fast alles.

nein, eher nicht - ich bin froh, dass du dein Anliegen nochmal in Worten und Skizzen erläuterst.

__________________
   /     /     /     /
  /     /     /     /
/_____/_____/_____/

Frage: Wie würdet ihr das lösen (es gibt ja leider nur rechteckige Bilderformate ^^), außerdem soll es einen Hover-Effekt (beim Bild, nicht beim daraufliegenden Text) geben, der das Bild ändert.

Mein erster Gedanke: Rechteckige Bilder, die sich in der Breite von der linken unteren bis zur rechten oberen Ecke des Parallelogramms erstrecken. An den Ecken links oben und rechts unten haben sie ein transparentes Dreieck.
Positionierung ... hmm, entweder jedes Element absolut positionieren, das gefällt mir aber nicht so. Alternativ könnte man die li-Elemente (eine Navigation ist ja eine Liste aus Links) auch floaten und mit negativem margin-right aneinanderrücken.

Auch eine Imagemap für den gesamten Navi-Bereich wäre denkbar; dann wird's aber mit dem hover-Effekt knifflig, wenn man nicht mit Javascript nachhelfen möchte.

Ich dachte vllt mit DOM, also einfach Bilder (vllt als bg von div-Bereich mit Text drüber ?) und dann Abstand nach links halt festlegen (bin mir aber bei der Lösung bezüglich HoverEffekt nicht so sicher, da sich die Bilder da ja dann zwangsläufig überlagern, erzeugt ein MouseOver bei einem transparenten Teil eines GIFs auch eine Reaktion?)

Ja, das ist wohl so. In den Übergangszonen würden sich u.U. beide Elemente "angesprochen" fühlen, obwohl beim Klicken natürlich nur das zuoberst liegende (also das im Quelltext später auftretende) Element reagieren würde.

Meine zweite Lösung wäre ganz primitiv aber auch unglaublich umständlich und nicht gerade flexibel: einfach in Rechtecke aufteilen:
________
   /
  /
_/______

Das wäre noch eine Variante, wenn du die Übergangszonen vom hover-Effekt und vom Klicken ausnehmen willst.

PS.: Punkte dienen nur als Platzhalter ;)

Welche Punkte?

So long,
 Martin