仿苹果js+css工具条：CSS Dock Menu
原文地址：http://www.ndesign-studio.com/blog/mac/css-dock-menu
整理：中国asp之家 www.aspxhome.com
如果你是一个苹果的超级粉丝，你一定会喜欢上这款我设计的CSS dock menu，该工具条使用了 Jquery 这个轻量级 Javascript 类库提供的接口，Interface 提供的界面组件和我的一些原创 Icon图标，该仿苹果工具条提供了三个样式：一个是css-dock.html（包含了页面顶部和底部两工具条，如果你只想要底部的菜单工具条可以使用css-dock-top.html，同样底部菜单可以使用css-dock-bottom.html。
这款css+Jquery制作的 CSS dock menu 是为了用在我打造的 WordPress 皮肤 iTheme 上的，不用我多说，大家都猜到了吧：一款模仿苹果的 WP 主题。
该皮肤支持 widgets ，侧边栏支持拖拽，适合WordPress 2.0 和 2.1，适合以下浏览器：IE, Firefox, Safari, Opera。
下面将给您展示如何集成这个仿苹果工具菜单到您的网页中：
1.下载程序源文件（包含：JS, CSS, 和 icons图标）
下载地址：css-dock-menu.rar（202KB）
演示地址：css-dock-menu.html
2.插入代码：
在html的<head>区插入下列代码：
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>
第1部分是Javascript代码，第2部分是CSS样式表，最后一部分是使PNG在IE6下正常显示。
3.配置
别忘了把下面代码插入页面<body>标签中的任意位置
<script type="text/javascript">
$(document).ready(
function()
{
$(’#dock2′).Fisheye(
{
maxWidth: 60,
items: ‘a’,
itemsText: ’span’,
container: ‘.dock-container2′,
itemWidth: 40,
proximity: 80,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
}
)
}
);
</script>
4.添加或移除选项
增加上面的菜单选项（注意：span标签是在 img之后的）：
<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>
增加下面的菜单选项（注意：span标签是在 img之前的）：
<a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>
5、浏览器支持
我已经在 IE 6, IE 7, Opera 9, Firefox 2, and Safari 2下测试了代码，都通过了。（只是在Safari 2下有些小的错误）
站长工具
相关文章
请稍等，评论加载中...