你知道一个网站在0到90度的角度实现菜单栏吗？

Question

我被要求实现一个既不水平也不垂直的菜单栏.这是两个示例按钮:

菜单栏http://img130.imageshack.us/img130/4820/dropdownf.jpg

这对我来说是新的,所以要学习如何使这项工作,我正在寻找一个使用类似菜单栏的网站(或更好的教程).有任何想法吗？

Answer 1

你应该看看这里

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

或使用这样的

更新:

/* 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);

参见示例 http://jsbin.com/ajoqe/4

更新:2

或使用此扩展程序

通用CSS转换:旋转(免费扩展):http://www.dmxzone.com/go？17422 #Overview

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

是一个基于jQuery,只使用HTML和CSS构建 - 没有Flash,所以永远!它甚至支持其他主流浏览器旁边的IE6.*搜索引擎友好 - 通用CSS转换:旋转是纯HTML和基于CSS并生成搜索引擎友好的HTML代码,可以很好地索引所有搜索引擎和网络蜘蛛.

更新3

或使用此http://code.google.com/p/jquery-rotate/

支持两种JavaScript图像处理实现:

1. 使用适用于Microsoft Internet Explorer的DXImageTransform过滤器
2. 将Canvas对象用于其他浏览器

该库已经过测试:

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