
如果你是苹果机的疯狂粉丝,那么你一定会喜欢我设计的这款CSS Dock Menu。它采用了Jquery的JavaScript库和Fisheye的界面,其中一些图标是我自己设计的。这里有两种样式:底部和顶部。下面我演示一下如何在你的Web页面中使用它:
1、下载源文件
2、插入代码
在HTML中的标签中插入如下代码:
第一部分是需要用到的Javascript代码,第二部分是用到的CSS样式表,最后一个是用于Internet Explorer 6中PNG图片的Hack处理。
3、配置
且记要把下面的代码放到HTML中的标签内
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
转载请注意出处,至少保留原作者链接,谢谢!