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

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

1、下载源文件

点击下载此文件

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

%MINIFYHTMLed86d41c6f5a2e66ed2bbb2c790458b85%%MINIFYHTMLed86d41c6f5a2e66ed2bbb2c790458b86%

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

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

%MINIFYHTMLed86d41c6f5a2e66ed2bbb2c790458b87%

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

Home

向底部菜单中增加新项目（注：<span>标签位于<img alt=”" />之前）：

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
转载请注意出处，至少保留原作者链接，谢谢！

除非特别声明，dudo博客文章均为原创，转载请以链接形式注明本文链接

本文链接: http://dudo.org/archives/2008061911251.html