当前位置：首页 > 脚本 > 广告代码 > 菜单导航 > 使用jQuery框架专为Mac爱好者开发的CSS苹果菜单(顶

使用jQuery框架专为Mac爱好者开发的CSS苹果菜单(顶
日期：2013-05-20 16:20:15 来源：网络收集

Mac爱好者一定非常熟悉苹果机上的超酷桌面菜单，哈哈，终于被移植到web上了，本脚本使用jQuery框架，完整的实现了Mac的DockMenu，包括用于网页顶端和用户网页底部的两中形式的菜单。
第一步：
下载全部源程序和相关脚本以及图标
第二步：
在<head>区添加以下代码
[code]
<scripttype="text/javascript"src="js/jquery.js"></script>
<scripttype="text/javascript"src="js/interface.js"></script>
<linkhref="style.css"rel="stylesheet"type="text/css"/>
<!--[ifltIE7]>
<styletype="text/css">
.dockimg{behavior:url(iepngfix.htc)}
</style>
<![endif]–>
[/code]
第一部分是要引用的js库，包含jQuery的引用，第二部分是样式表的引用，第三部分是针对IE6下显示PNG图片的修复包
第二步：
添加以下代码到<body>区，任意位置
[code]
<scripttype="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>
[/code]
第三步：
添加用于显示菜单的HTML代码
a、顶部菜单代码
[code]
<divclass="dock"id="dock">
<divclass="dock-container">
<aclass="dock-item"href="//www.jb51.net"><imgsrc="images/home.png"alt="home"/>分享JavaScript</a>
<aclass="dock-item"href="//www.jb51.net"><imgsrc="images/email.png"alt="contact"/>Contact</a>
<aclass="dock-item"href="//www.jb51.net"><imgsrc="images/portfolio.png"alt="portfolio"/>Portfolio</a>
<aclass="dock-item"href="//www.jb51.net"><imgsrc="images/music.png"alt="music"/>Music</a>
<aclass="dock-item"href="//www.jb51.net"><imgsrc="images/video.png"alt="video"/>Video</a>
<aclass="dock-item"href="//www.jb51.net"><imgsrc="images/history.png"alt="history"/>History</a>
<aclass="dock-item"href="//www.jb51.net"><imgsrc="images/calendar.png"alt="calendar"/>Calendar</a>
<aclass="dock-item"href="//www.jb51.net"><imgsrc="images/rss.png"alt="rss"/>RSS</a>
<aclass="dock-item"href="//www.jb51.net"><imgsrc="images/rss.png"alt="rss"/>RSS</a>
<aclass="dock-item"href="//www.jb51.net"><imgsrc="images/rss2.png"alt="rss"/>RSS2</a>
</div>
</div>
[/code]
b、底部菜单代码
[code]
<divclass="dock"id="dock2">
<divclass="dock-container2">
<aclass="dock-item2"href="//www.jb51.net">Home<imgsrc="images/home.png"alt="分享JavaScript"/></a>
<aclass="dock-item2"href="//www.jb51.net">Contact<imgsrc="images/email.png"alt="contact"/></a>
<aclass="dock-item2"href="//www.jb51.net">Portfolio<imgsrc="images/portfolio.png"alt="portfolio"/></a>
<aclass="dock-item2"href="//www.jb51.net">Music<imgsrc="images/music.png"alt="music"/></a>
<aclass="dock-item2"href="//www.jb51.net">Video<imgsrc="images/video.png"alt="video"/></a>
<aclass="dock-item2"href="//www.jb51.net">History<imgsrc="images/history.png"alt="history"/></a>
<aclass="dock-item2"href="//www.jb51.net">Calendar<imgsrc="images/calendar.png"alt="calendar"/></a>
<aclass="dock-item2"href="//www.jb51.net">Links<imgsrc="images/link.png"alt="links"/></a>
<aclass="dock-item2"href="//www.jb51.net">RSS<imgsrc="images/rss.png"alt="rss"/></a>
<aclass="dock-item2"href="//www.jb51.net">RSS2<imgsrc="images/rss2.png"alt="rss"/></a>
</div>
</div>
[/code]
你可以添加或者删除菜单项目，
例1：添加一个顶部的菜单项，注意标签在<img>标签之后
<aclass="dock-item"href="//www.jb51.net"><imgsrc="images/home.png"alt="home"/>Home</a>
例2：添加一个底部菜单项目，注意标签在<img>标签之前
<aclass="dock-item2"href="//www.jb51.net">Home<imgsrc="images/home.png"alt="home"/></a>
本程序在IE6，IE7，FireFox2.0、3.0，Opera9中测试均通过