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

最新推荐文章于 2023-09-19 13:59:42 发布

weixin_33775572

最新推荐文章于 2023-09-19 13:59:42 发布

阅读量548

点赞数

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/428637

版权

所需源文件--见下方文件附件

在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]– >

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

且记要把下面的代码放到HTML中的<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>

向顶部菜单中增加新的项目（注：<span>标签位于<img>之后）：

< a class ="dock-item" href ="#" > < img src ="images/home.png" alt ="home" /> < span >Home </span> </a>
< a class ="dock-item2" href ="#" > < span >Home </span> < img src ="images/home.png" alt ="home" /> </a>

本文转自chainli 51CTO博客，原文链接：http://blog.51cto.com/lichen/164286，如需转载请自行联系原作者