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?
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:
- using DXImageTransform filter for Microsoft Internet Explorer
- 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)
Just because the image is at an angle doesn't mean the hit area (the link) needs to be at an angle...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With