Do you know a website that implements a menubar at an angle between 0 and 90 degrees?

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

CSS Transformations are currently supported only via vendor-specific CSS attributes. See this blog for cross-browser support.

Answer 2

Just because the image is at an angle doesn't mean the hit area (the link) needs to be at an angle...

Answer 3

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)

Answer 4

Stuff like this is usually done using images and - if you want a non-rectangular click area - using image maps. It's not very difficult to do but a lot more work than a straightforward ul.

The CSS rotate capabilities are not wide-spread enough yet to achieve a consistent effect in all browsers, but it might be an option to build a cross-browser menu that looks okay unrotated, and great when rotated.