CSS Dock Menu:JS+CSS 仿苹果MAC机桌面导航菜单

仿苹果机桌面菜单
如果你是苹果机的疯狂粉丝,那么你一定会喜欢我设计的这款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
转载请注意出处,至少保留原作者链接,谢谢!