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>