jquery插件menu效果(二)

最新推荐文章于 2021-12-07 21:07:48 发布

magic_dreamer

最新推荐文章于 2021-12-07 21:07:48 发布

阅读量85

点赞数

分类专栏： UI 文章标签： jQuery CSS HTC IE HTML ViewUI

本文链接：https://blog.csdn.net/magic_dreamer/article/details/83531416

版权

UI 专栏收录该内容

122 篇文章 0 订阅

订阅专栏

jquery插件menu效果(二)

插件首页
http://www.ndesign-studio.com/blog/mac/css-dock-menu

下载地址
http://www.ndesign-studio.com/file/css-dock-menu.zip

得到文件
css-dock-menu.zip

根据里面的源代码，撰写测试页面menus-demo2.html如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dock menu demo</title>
<script src="../components/jquery/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script src="../components/jquery/jquery.dock.menu.min.js"
type="text/javascript"></script>

<style type="text/css">
body {
font: 11px Arial, Helvetica, sans-serif;
background: #ffffff url(images/main-bg.gif);
padding: 0;
margin: 0;
}
img {
border: none;
}

/* dock - top */
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background: url(images/dock-bg2.gif);
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}

/* dock2 - bottom */
#dock2 {
width: 100%;
bottom: 0px;
position: absolute;
left: 0px;
}
.dock-container2 {
position: absolute;
height: 50px;
background: url(images/dock-bg.gif);
padding-left: 20px;
}
a.dock-item2 {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 40px;
color: #000;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
padding-left: 20px;
}
.dock-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
</style>
</head>
<body>
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="#"><img src="../images/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="#"><img src="../images/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="#"><img src="../images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="#"><img src="../images/music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="#"><img src="../images/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="#"><img src="../images/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="#"><img src="../images/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="#"><img src="../images/rss.png" alt="rss" /><span>RSS</span></a>
</div>
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>
</body>
</html>

magic_dreamer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery插件menu效果(二)

jquery插件menu效果(二)插件首页http://www.ndesign-studio.com/blog/mac/css-dock-menu下载地址http://www.ndesign-studio.com/file/css-dock-menu.zip得到文件css-dock-menu.zip根据里面的源代码，撰写测试页面menus-demo2.h...
复制链接

扫一扫

专栏目录