Question

I was asked to implement a menu bar that is neither horizontal nor vertical. Here are two example buttons:

This is something new to me, so to learn how to make this work I’m looking for a site (or better yet, a tutorial) that uses a similar menu bar. Any ideas?

Answer 1

You should look at here

http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

or use like this

Update:

/* for firefox, safari, chrome, etc. */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/* for opera */
-o-transform: rotate(-90deg);

see example http://jsbin.com/ajoqe/4

Update: 2

or use this extension

Universal CSS Transforms: Rotate(free extension) : http://www.dmxzone.com/go?17422#Overview

* Pure CSS based - No Flash required! 
* Fully cross browser compatible - The Universal CSS Transforms: Rotate

is a jQuery based, build only with
HTML & CSS – no Flash what so ever! It
even supports IE6 next to the other
major browsers.
* Search engine friendly – The Universal CSS Transforms: Rotate is
pure HTML and CSS based and generates
search engine friendly HTML code that
can be nicely indexed by all search
engines and web spiders.

update 3

or use this http://code.google.com/p/jquery-rotate/

Two JavaScript image handling
implementations are supported:

1. using DXImageTransform filter for Microsoft Internet Explorer
2. using Canvas object for other browsers

The library has been tested with:

* Mozilla FireFox 2.0.0.2
* Internet Explorer 7.0
* Opera 9.1 (note Opera 8 is not supported)