Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

Menu bar

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?

like image 253
Pieter Avatar asked Apr 11 '10 08:04

Pieter


2 Answers

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)
like image 123
Jitendra Vyas Avatar answered Sep 23 '22 14:09

Jitendra Vyas


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

like image 37
Gareth Avatar answered Sep 23 '22 14:09

Gareth