90 Grad gedrehtes Menü?

[Math55]

Hallo,

ich suche ein Menü, welches so ähnlich gemacht ist wie hier zu sehen: http://www.templatemonster.com/flash-templates/7378.html

Also sprich die Sache mit "Nature" und so weiter. Wie löse ich das am besten ohne Flash? Hat jemand einen Link zu sowas?

Vielen Dank

 

[Maik]

Hi,

was die Schriftausrichtung betrifft, dürfte dich http://www.cssplay.co.uk/menus/side_tabs.html sicherlich einen Schritt weiterbringen.

Ein Tipp vorab: die Umsetzung geschieht grundsätzlich mit entsprechenden Grafiken, denn CSS3 Text Module / writing-mode wird derzeit noch immer nur vom IE5.5+ unterstützt.

 

[Math55]

Hallo,

vielen Dank für die Antwort. Wenn man sich die HTML Version des Flash-Templates anschaut, sieht man, dass es da auch so gemacht ist, eben nur mit Bildern, wie Du richtig sagtest. Hast Du/jemand dazu ein Beispiel, also wie man es mit Bildern machen könnte? Ein Bild und dann einfach Imagemaps drüber, oder könnte man es auch als jeweils ein kleines Bild machen? Welches dann am besten, wenn man mit der Maus drüber ist, sch auch verändert? Also sprich ein MouseOver Effekt.

Danke


PS: Muss auch nicht nur rein HTML sein, Hauptsache kein Flash...

 

[Jan-Frederik Stieler]

Hi,
also du kannst dir doch eine UL-Liste oder Divs erstellen und dann die mit Bildern füllen und mit a:hover das Mouseover realisieren.

Gruß

 

[Math55]

Hi,

hast Du dazu mal ein Beispiel? Bin leider nicht so der Designmensch ...

Danke

 

[Jan-Frederik Stieler]

Hi,
also hier ist eine Anleitung wie du eine Liste mit Bildern und Hover versehen kannst.
Beschte aber das hier noch text über den Bidlern liegt den du natürlich nicht benötigst.
http://www.bartelme.at/journal/archive/listen_stylen_mit_css
Ansonsten ist eigentlich die Seite die der Maik schon genannt hat genau die richtige mit Beispielen.

Viele Grüße

 

[Maik]

Hast Du/jemand dazu ein Beispiel, also wie man es mit Bildern machen könnte?

Schau dir doch einfach mein verlinktes Beispiel etwas genauer an, indem du einen Blick in den Seitenquelltext wirfst. Der Autor hat für die drei Menüpunkte jeweils eine Grafik als Hintergrundbild eingesetzt:

• http://www.cssplay.co.uk/menus/canon_button.gif
• http://www.cssplay.co.uk/menus/nikon_button.gif
• http://www.cssplay.co.uk/menus/pentax_button.gif

Wie sich ein CSS-Rollover (=Grafiktausch) technisch realisieren lässt, kannst du in meinem gleichnamigen Tutorial erfahren.