jquery-menu-aim插件是实现二级导航亚马逊式三角滑动的强力工具,它在性能上极佳,快速滑动,基本无延迟效果,源码位置见对应作者的github,接下来附上样例代码:
$(function () {
$('.menu-left').menuAim({ // 插件的使用
activate: activateSub,
deactivate: deactivateSub,
exitMenu: exitMenuSub // 必须加,负责处理最后一次移入问题
});
}); function activateSub(row) { // 参数row自动获取当前元素
var subId = $(row).data('sub-id'),
$subMenu = $('#' + subId);
$subMenu.show();
} function deactivateSub() {
$('.menu-right li').hide();
} function exitMenuSub() {
return true;
} $(".menu-right li").mouseover(function () {
$(this).show();
}); $('.menu-right li').mouseleave(function () {
$(this).hide();
});
ul {
list-style: none;
padding:;
margin:;
} .menu {
float: left;
} .menu-left {
width: 200px;
float: left;
} .menu-left li {
height: 50px;
line-height: 50px;
text-align: center;
background: #ccc;
} .menu-right {
width: 400px;
float: left;
} .menu-right li {
height: 320px;
background: #eee;
display: none;
}
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>navigation</title>
<link rel="stylesheet" href="./index.css">
</head> <body>
<div class="menu">
<ul class="menu-left">
<li data-sub-id="hot">当季热门</li>
<li data-sub-id="domestic">国内游</li>
<li data-sub-id="overseas">海外游</li>
<li data-sub-id="around">周边游</li>
</ul>
<ul class="menu-right">
<li id="hot">
<div>one</div>
<div>one</div>
<div>one</div>
</li>
<li id="domestic">
<div>two</div>
<div>two</div>
<div>two</div>
</li>
<li id="overseas">
<div>three</div>
<div>three</div>
<div>three</div>
</li>
<li id="around">
<div>four</div>
<div>four</div>
<div>four</div>
</li>
</ul>
</div>
<script src="./jquery.js"></script>
<script src="./jquery.menu-aim.js"></script>
<script src="./index.js"></script>
</body> </html>