dudo博客

仿苹果机桌面菜单
如果你是苹果机的疯狂粉丝,那么你一定会喜欢我设计的这款CSS Dock Menu。它采用了JqueryJavaScript库和Fisheye的界面,其中一些图标是我自己设计的。这里有两种样式:底部和顶部。下面我演示一下如何在你的Web页面中使用它:

1、下载源文件

点击下载此文件

2、插入代码
在HTML中的标签中插入如下代码:


第一部分是需要用到的Javascript代码,第二部分是用到的CSS样式表,最后一个是用于Internet Explorer 6中PNG图片的Hack处理

3、配置
且记要把下面的代码放到HTML中的标签内

4 添加或者删除项目
向顶部菜单中增加新的项目(注:<span>标签位于<img alt=”” />之后):

"home"Home

向底部菜单中增加新项目(注:<span>标签位于<img alt=”” />之前):

Home"home"

浏览器兼容性
我在Internet Explorer 6、Internet Explorer 7、Opera 9、Firefox 2以及Safari 2(尽管在Safari中存在一些小问题)中测试通过。
P.S. FireFox 3中也测试通过(dudo注

演示:CSS Dock Menu
CSS Dock Memu:top
CSS Dock Meu: Bottom

原作者:http://www.ndesign-studio.com/blog/mac/css-dock-menu
翻译:http://dudo.org/?p=251
转载请注意出处,至少保留原作者链接,谢谢!



共有(3)条评论

Ystar灬龙子 发表于 2008-6-19 at 19:55 #1楼

曾经见过![reply=dudo,2009-04-25 09:30 PM]用的人似乎还不少~发晚了 呵呵[/reply]

[回复]


lijing0033 发表于 2008-6-20 at 19:51 #2楼

Jquery势头很猛啊

[回复]


Movie 发表于 2008-7-13 at 11:40 #3楼

good,妙!

[回复]


随便说两句
名字:
Email:
网站:
内容:

无觅相关文章插件,快速提升流量