Gestern habe ich einen Artikel über Rotation von HTML Elementen mittels CSS auf snook.ca gelesen und da kam mir die Idee, dass mit diesen CSS-Anweisungen ja auch ein stylisches Menü gebastelt werden kann. Also habe ich mich gestern Abend kurz an den Rechner gesetzt und ein wenig gespielt. Nach anfänglichen Problemen im FireFox – was ich nicht erwartet hätte, ich dachte eher der IE spackt mal wieder rum – hat es mit meinem 90° gegen den Uhrzeigersinn gedrehtem Menü auch hingehauen.
Viel braucht es wirklich nicht, nur ein wenig HTML und ein wenig CSS, wobei der HTML-Code für das Menü absoluter Standard-Code ist, der auch für ein Top-Menü Verwendung finden würde.
Der “menucontainer” ist übrigens überflüssig, den habe ich nur verwendet, weil ich das Menü nicht zentrieren, sondern etwas versetzt nach links anzeigen wollte.
Klarer wird es sichlich mit dem folgenden CSS, welches das Menü darstellt:
* {
margin: 0em;
padding: 0em;
border: none;
}
#menucontainer {
width: 800px;
margin: auto auto;
}
#menu {
width: 200px;
-webkit-transform: rotate( -90deg );
-moz-transform: rotate( -90deg );
-moz-transform-origin: 100px 100px;
filter: progid:DXImageTransform.Microsoft.BasicImage( rotation=3 );
}
#menu a:link, #menu a:visited {
background-color: #F00;
color: #FFF;
margin-bottom: 25px;
width: 200px;
height: 50px;
padding: 5px;
line-height:90%;
display: block;
font-family: sans-serif;
font-weight: bold;
font-size: 24px;
text-decoration: none;
}
#menu a:hover {
background-color: #DDD;
color: #F00;
}
Wenn ich ein CSS-Stylesheet beginne, schalte ich zuerst für alle Elemente die margins, paddings und die borders aus, um sie später für die Elemente wieder zu setzen, wo ich diese Eigenschaften wirklich brauche. Das macht die ganze Sache immer klarer und behebt viele Probleme mit dem IE auf einen Schlag.
Dem div “menucontainer” wird dann eine Breite von 800 Pixeln zugewiesen und ein automatischer margin, wodurch das gesamte div element im Browser zentriert wird.
Dann kommt schon die Anweidung, die das Menü gegen den Uhrzeigersinn dreht. Zuerst wird eine Breite vergeben, die der Breite der einzelnen Menüpunkte entspricht. Das muss so sein, sonst funktioniert es im IE 7 nicht.
Danach folgen Anweisungen für die verschiedenen Browser um die Rotation durchzuführen. Wichtig beim FireFox: “-moz-transform-origin” muss korrekt gesetzt werden, sonst sitzen die Menüpunkte später zu tief. Jeweils die Hälfte der Menüpunkt-Breite für horizontalen und vertikalen Wert haben sich bei mir bewährt.
Die einzelnen Menüpunkt können beliebig formatiert werden, auch margins und paddings sind kein Problem. Wichtig ist allerdings, dass “display” auf “block” gesetzt wird und feste Breiten und Höhen vergeben werden, sonst wird es Probleme bei der Darstellung geben.
Getestet habe ich die Anweisungen im IE 7 und im FireFox 3.5. Im IE 6 läufts so lala, könnte man sicherlich auch noch hinbekommen, aber ich bin der Meinung, dass der IE 6 nicht mehr unterstützt werden muss. Wer den IE 6 noch nutzt, der fährt auch Autos ohne Bremsen.
Hier gibt’s die komplette Datei und hier eine kleine Vorschau, wie es aussehen könnte:
