我们都喜欢MAC,喜欢FishEye菜单。
实际上整合fisheye到你的项目中非常简单。
你所需要的是javascript,CSS和你的所用到的图片。你可以去下载FisheyeMenu.
URL:http://simply-basic.com/wp-content/uploads/image/fisheyemenu/fisheyemenu.zip
下面就说说怎么安装吧:
1.将解压的ZIP包中的所有文件(注:images目录下的图片可以行更换)上传到你的网站。
2.添加下面的代码到<head></head>之间
<link rel="stylesheet" type="text/css" xhref="http://YourDomainHere/fisheye-menu.css" />
<script xsrc="http://YourDomainHere/fisheye.js" type='text/javascript'></script>
当然你还需要将"http://YourDomainHere/..."换成你自己的网站下相应路径。
3.将下面的代码加到你的页面中你就可以看到fisheye menu的效果了。
<div><ul id="fisheye_menu">
<li><a xhref="http://www.mokha.cn/admin.php#1"><img xsrc="http://YourWebsite/icon.gif" alt="image description" /><span>Icon 1</span></a></li>
<li><a xhref="http://www.mokha.cn/admin.php#2"><img xsrc="http://YourWebsite/icon2.gif" alt="image description" /><span>Icon 2</span></a></li>
<li><a xhref="http://www.mokha.cn/admin.php#3"><img xsrc="http://YourWebsite/icon.gif" alt="image description" /><span>Icon 3</span></a></li>
<li><a xhref="http://www.mokha.cn/admin.php#4"><img xsrc="http://YourWebsite/icon2.gif" alt="image description" /><span>Icon 4</span></a></li>
<li><a xhref="http://www.mokha.cn/admin.php#5"><img xsrc="http://YourWebsite/icon.gif" alt="image description" /><span>Icon 5</span></a></li>
<li><a xhref="http://www.mokha.cn/admin.php#6"><img xsrc="http://YourWebsite/icon2.gif" alt="image description" /><span>Icon 6</span></a></li>
</ul></div>
4.如果你想改变图片大小或图片的扩展名,你可编辑fisheye.js,在前面几行可以看到如下代码:
var fisheyemenu = {
startSize : 55,
endSize : 88,
imgType : ".gif",
将其中的参数改成你想要的就可以了。
更多信息你参看:http://simply-basic.com/posts/19419