Question

我被要求实现一个既不水平也不垂直的菜单栏。以下是两个示例按钮：

Menu bar 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＆amp; CSS - 没有Flash，所以永远！它甚至支持IE6紧挨着另一个主流浏览器。 *搜索引擎友好 - 通用CSS转换：旋转是纯HTML和基于CSS并生成搜索引擎友好的HTML代码所有搜索都可以很好地编入索引引擎和网络蜘蛛。

更新3

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

两个JavaScript图像处理   支持实现：
使用适用于Microsoft Internet Explorer的DXImageTransform过滤器

将Canvas对象用于其他浏览器

该库已经过测试：
* Mozilla FireFox 2.0.0.2
* Internet Explorer 7.0
* Opera 9.1 (note Opera 8 is not supported)

Answer 2

仅仅因为图像处于某个角度并不意味着命中区域（链接）需要处于某个角度......

Answer 3

这样的东西通常是使用图像完成的 - 如果你想要一个非矩形的点击区域 - 使用图像映射。除了直截了当的ul之外，这项工作并不是很难，但要做的工作要多得多。

CSS rotate功能还不够广泛，无法在所有浏览器中实现一致的效果，但它可能是一个选项，可以构建一个看起来没有旋转的跨浏览器菜单，并且在旋转时效果很好。

Answer 4

目前仅通过特定于供应商的CSS属性支持CSS转换。请参阅此博客cross-browser support。

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

4 个答案: