jquery-menu-aim插件实现二级导航

　　jquery-menu-aim插件是实现二级导航亚马逊式三角滑动的强力工具，它在性能上极佳，快速滑动，基本无延迟效果，源码位置见对应作者的github，接下来附上样例代码：

 1 $(function () {
 2     $('.menu-left').menuAim({ // 插件的使用
 3         activate: activateSub,
 4         deactivate: deactivateSub,
 5         exitMenu: exitMenuSub // 必须加，负责处理最后一次移入问题
 6     });
 7 });
 8 
 9 function activateSub(row) { // 参数row自动获取当前元素
10     var subId = $(row).data('sub-id'),
11         $subMenu = $('#' + subId);
12     $subMenu.show();
13 }
14 
15 function deactivateSub() {
16     $('.menu-right li').hide();
17 }
18 
19 function exitMenuSub() {
20     return true;
21 }
22 
23 $(".menu-right li").mouseover(function () {
24     $(this).show();
25 });
26  
27 $('.menu-right li').mouseleave(function () {
28      $(this).hide();
29 });

 1 ul {
 2     list-style: none;
 3     padding: 0;
 4     margin: 0;
 5 }
 6 
 7 .menu {
 8     float: left;
 9 }
10 
11 .menu-left {
12     width: 200px;
13     float: left;
14 }
15 
16 .menu-left li {
17     height: 50px;
18     line-height: 50px;
19     text-align: center;
20     background: #ccc;
21 }
22 
23 .menu-right {
24     width: 400px;
25     float: left;
26 }
27 
28 .menu-right li {
29     height: 320px;
30     background: #eee;
31     display: none;
32 }

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <title>navigation</title>
 7     <link rel="stylesheet" href="./index.css">
 8 </head>
 9 
10 <body>
11     <div class="menu">
12         <ul class="menu-left">
13             <li data-sub-id="hot">当季热门</li>
14             <li data-sub-id="domestic">国内游</li>
15             <li data-sub-id="overseas">海外游</li>
16             <li data-sub-id="around">周边游</li>
17         </ul>
18         <ul class="menu-right">
19             <li id="hot">
20                 <div>one</div>
21                 <div>one</div>
22                 <div>one</div>
23             </li>
24             <li id="domestic">
25                 <div>two</div>
26                 <div>two</div>
27                 <div>two</div>
28             </li>
29             <li id="overseas">
30                 <div>three</div>
31                 <div>three</div>
32                 <div>three</div>
33             </li>
34             <li id="around">
35                 <div>four</div>
36                 <div>four</div>
37                 <div>four</div>
38             </li>
39         </ul>
40     </div>
41     <script src="./jquery.js"></script>
42     <script src="./jquery.menu-aim.js"></script>
43     <script src="./index.js"></script>
44 </body>
45 
46 </html>