Hallo Leute,
ich habe hier eine knifflige Aufgabe.
Ich soll ein schräges Navigations-Menü basteln.
Normales vertikales Menü - mit ausklappen ist via CSS und/oder auch mit wechselnden Grafiken kein Problem.
Wie aber soll man soetwas umsetzen, das das Menü schräg ist? Siehe Anhang
Ich habe wirklich schon viel ausprobiert und auch viel recherchiert.
Bisher konnte ich jedoch lediglich mit Imagemaps Erfolge verzeichnen.
Problematisch ist die Tatsache, das mein Mousover die einzelnen Menüpunkte verändert werden sollen (Hintergrundfarbe, Textfarbe)
Die einzelnen Navigationspunkte liegen mir gruppenweise als transparente PNGs vor.
Könnt ihr mir vielleicht ein paar Tips oder Hinweise geben, wie man soetwas vielleicht umsetzen kann?
Danke im Voraus
Hallo, also mit CSS und HTML biste ganz schlecht an der Sache. Ich würde die Navigation ganz einfach über Flash machen. SO bekommste auch deine schrägen Rechtecke hin mit Hovereffekten.
Ob es vielleicht auch mit Java-Script funktionieren könnte kann ich dir nicht sagen. Deine Imagemap würde auch funktionieren nur ohne Hover.
Liebe Grüße
Dotnet-media
P.s andere möglichkeit würde mich auch spontan nciht einfallen.
Hmm .. imagemap + ein bisschen Javascript (onmouseover-Bildwechsel (der gesamten Map? *kratzamkopp* .. gut möglich)) könnte theoretisch funktionieren. Ist halt eher unflexibel, mal eben einen Menüpunkt dazu- oder rausnehmen ist dann mit etwas Arbeit verbunden .. aber sonst wüsste ich in schräg sonst auch spontan nix.
Es ist immer wieder super anzusehen, wie sich Designer Sachen überlegen ohne das vorher mit dem Coder abzusprechen...Es gibt eine reine CSS-Lösung dafür: transforms.
Das Ganze ist gerade noch im Working Draft von CSS3, wird aber von den guten Browsern bereits unterstützt.
Für den Internet Explorer würde ich dann empfehlen, im CSS3 über ein JS beizubringen: http://www.modernizr.com
Von Flash und Imagesmaps sollte man bei sowas erstmal die Finger lassen und nur im absoluten Ausnahmefall einsetzen!
Ui .. und damit kriegt man das exakt genauso hin? .. wird Zeit, daß ich mich endlich mal mit CSS3 beschäftige *seufz* .. der Geist ist willig ..
Hallo Leute,
erstmal Vielen Dank für Eure Antworten!
Wie gesagt, eine Lösung via Imagemap funktioniert bereits, auch ein paralleler Image-Swap via JS sollte dabei klappen.
Aber mit dieser Lösung bin ich noch nicht so richtig zufrieden.
GRUND: viel zu unflexibel und relativ lange Ladezeiten
Die Lösung via TRANSFORMS werde ich mir mal näher ansehen.
Ich bleibe am Ball und halte Euch auf dem Laufenden.
Weitere Vorschläge?
Beste Grüße
ska
So, ich habe mir dann mal die Funktion "rotate" aus CSS3 angesehen.
Leider reicht diese Funktion absolut nicht aus - zumal sie auch noch nicht von allen Browsern korrekt angezeigt wird.
Ich habe bei meiern Recherche jedoch folgendes gefunden: http://www.cssplay.co.uk/menus/cross.html
Lässt sich damit eventuell etwas schräges realisieren?
Danke im Voraus
ska
Die macht doch genau was du willstZitat von skavenger0816
http://dl.dropbox.com/u/5465472/tp/transform.htm
http://bit.ly/ezK8IG
Bis auf den Internet Explorer von allen. Und da kommen JS wie modernizr.com zu Einsatz (ich bin mir bei dem tranform aber nicht sicher, ob das damit auch klappt).
Ansonsten gibt es den schönen Begriff der "Graceful Decradation". Nimm für den IE doch dann einfach ein Hintergrundbild und lass die Links eckig!
Tolles Beispielscript
Vielen vielen Dank für das geniale Beispiel.
Das sieht ja schonmal super aus.
Wie verhält es sich dann eigentlich mit dem ausklappenden Submenü? Werden oder können die Ausgangskoordinaten des Submenüs auf selbiger Höhe beginnen, wie die verschobenen rechten Koordinaten des Hauptmenüs?
Wie Du bereits schreibst, funktioniert dieses Beispiel noch nichtmal im neuesten IE8. Die Navi sollte möglichst ab IE7 und FF2.0 laufen. Daher habe ich mir mal "Modernizr" näher angesehen...
Ich habe die JS-Lib in das HTML eingebunden. Dann werde ich aus der Doku jedoch nicht so recht schlau. Könntest Du mir eventuell einen kleinen Gedankenanstoss geben, wie ich den "mordernizr" im HTML einsetzen kann, damit die Funktion "transforms" auch im IE funktioniert?
Nochmals ein Riesen-Dankeschön für deine sehr kompetente Hilfe.
Gruß
ska
Ich hab nochmal ein wenig gebastelt.
Dadurch hat sich die Frage nach dem Submenü erübrigt.
Guck mal hier: http://dl.dropbox.com/u/15513461/transform.htm
Wenn ich nun noch den "Spaß" im IE mit Hilfe von "mordernizr" zum Laufen bekomme, ist alles super.
Freue mich auf eine Antwort.
Gruß
ska
Wenn du mit dem modernizr nicht zurecht kommst, gibt es auch noch die Filter von Microsoft:
http://msdn.microsoft.com/de-de/libr...,VS.85%29.aspx
http://www.useragentman.com/blog/201...rms-even-in-ie
Wie du den modernizr einbindest wird direkt unter dem Download-Button auf der Startseite erklärt.
Ansonsten gibt es auch noch eine Möglichkeit über eine htc-Datei.
Edit: Und wie bereits gesagt: Auch gerne mit dem Begriff der "Graceful Degradation" auseinandersetzen
Hey hero-master,
nochmal Danke für die tollen Infos.
Ich habe hier nun so einiges probiert.
Die htc-Datei bringt nur was für "rounded corners" und ein paar weitere grafische Effekte - jedoch nichts für "transforms".
Der modernizr bringt in diesem Fall auch nichts - konnte ihn nun korrekt einbinden, funktioniert auch, jedoch leider nicht für transforms.
Nun werde ich mir den Matrix-Filter von MS mal genauer ansehen - denn damit kann man soetwas anscheinend auch realisieren.
So wie ich das interpretiere, kann diese Funktion jedoch nur den gesamten Boxinhalt drehen - jedoch nicht einfach die rechten Koordinaten im Winkel verschieben. Aber ich bin da noch am rumprobieren.
Anscheinend läuft es wohl darauf hinaus, das ich die Navigation mit Hilfe von "transforms" realisieren werde und mit Hilfe einer Browserweiche dem IE dann ein grafisches Menü via Imagemap und Imageswap anbiete.
Oder hast du eventuell noch andere Ideen?
Danke im Voraus
ska
http://www.am530.de/lab/rotation/index.php
vielleicht kannst du damit was anfangen...
gruss-
Danke für den Link. Funktioniert tatsächlich im IE!
ABER: Mein Menü ist ja nicht einfach verdreht, sondern es sind ja nur die rechten Seiten nach oben verschoben.
Das scheint mit dem Filter wohl nicht zu gehen.
ODER: Welche der Parameter muss ich denn anpassen, damit nur die rechte Seite nach ober verschoben ist?
Ich werde mir diese Technik aber noch näher ansehen.expand',M11=0.9781476007338057,M12=0.20791169081775934,M21=-0.20791169081775934,M22=0.9781476007338057)
Gruß
Hi Leutz,
nach einigem Rumprobieren mit dem Matrix-Filtern von MS konnte ich mit Hilfe eines guten Freundes (der noch recht fit in Trigonometrie ist!!!!) eine funktionierende Lösung finden.
Hier mal ein
Testlink: http://dl.dropbox.com/u/15513461/transform-IE.htm
Testbild: http://dl.dropbox.com/u/15513461/transform-IE-geht.jpg
Vielen Dank für Eure Hilfe und unbekannterweise an Steven
ska
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
LinkBack URL
About LinkBacks
Zitieren