当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《你知道一个网站在0到90度的角度实现菜单栏吗?》经验,为你挑选了1个好方法。

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

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

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



1> Jitendra Vya..:

你应该看看这里

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图像处理实现:

    使用适用于Microsoft Internet Explorer的DXImageTransform过滤器

    将Canvas对象用于其他浏览器

该库已经过测试:

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

推荐阅读
mylvfamily
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有