一个调用jQuery-menu-aim插件的小Demo
今天看到新闻讲到了Amazon反应超快的下拉菜单，于是去看了下
插件的GitHub地址：https://github.com/kamens/jQuery-menu-aim
自己做了一个小Demo，代码如下：
View Code
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>amazonMenu</title> 5 <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script> 6 <script type="text/javascript" src="./jquery.menu-aim.js"></script> 7 <style> 8 body{ 9 font-family:微软雅黑; 10 font-size:16px; 11 } 12 .menuBtn{ 13 position:absolute; 14 top:10px; 15 left:10px; 16 width:80px; 17 padding-left:20px; 18 height:20px; 19 line-height:20px; 20 color:white; 21 background-color:black; 22 } 23 .menuTips{ 24 position:absolute; 25 top:10px; 26 left:110px; 27 width:380px; 28 } 29 .menuMain{ 30 position:absolute; 31 top:30px; 32 left:10px; 33 width:200px; 34 background-color:white; 35 border:solid 1px gray; 36 border-top:solid 2px black; 37 38 } 39 .menuUl{ 40 list-style-type:none; 41 padding:0px; 42 margin:0px; 43 } 44 .menuLi{ 45 padding:3px; 46 height:20px; 47 line-height:20px; 48 cursor:default; 49 } 50 .menuLi:hover{ 51 color:#ab36c9; 52 font-weight:bolder; 53 } 54 .menuSub{ 55 position:absolute; 56 top:30px; 57 left:210px; 58 width:190px; 59 padding-left:10px; 60 background-color:white; 61 border:solid 1px gray; 62 border-top:solid 2px black; 63 display:none; 64 } 65 </style> 66 </head> 67 <body> 68 <span id="menuBtn" class="menuBtn">菜单</span> 69 <span id="menuTips" class="menuTips"></span> 70 <div id="menuMain" class="menuMain"> 71 <ul id="menuUl" class="menuUl" > 72 <li class="menuLi" id="menuLi_1">11</li> 73 <li class="menuLi" id="menuLi_2">22</li> 74 <li class="menuLi" id="menuLi_3">33</li> 75 <li class="menuLi" id="menuLi_4">44</li> 76 <li class="menuLi" id="menuLi_5">55</li> 77 <li class="menuLi" id="menuLi_6">66</li> 78 </ul> 79 </div> 80 <div id="menuSub_1" class="menuSub"> 81 11 82 </div> 83 <div id="menuSub_2" class="menuSub"> 84 22 85 </div> 86 <div id="menuSub_3" class="menuSub"> 87 33 88 </div> 89 <div id="menuSub_4" class="menuSub"> 90 44 91 </div> 92 <div id="menuSub_5" class="menuSub"> 93 55 94 </div> 95 <div id="menuSub_6" class="menuSub"> 96 66 97 </div> 98 </body> 99 <script type="text/javascript"> 100 $(".menuSub").css("height",$(".menuMain").css("height")); 101 $("#menuUl").menuAim({ 102 activate:function(li){ 103 var menuId = ($(li).attr("id")+"").split('_')[1]; 104 $("#menuTips").html(menuId); 105 $("#menuSub_"+menuId).show(); 106 }, 107 deactivate:function(){ 108 $(".menuSub").hide(); 109 }, 110 enter:function(){ 111 $("#menuTips").html("enter"); 112 this.activate(); 113 }, 114 exit:function(){ 115 $("#menuTips").html("exit"); 116 117 } 118 }); 119 </script> 120 </html>
