一个调用jQuerymenuaim插件的小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>

相关阅读:
idea用法
 pagehelper用法
 mybatis
多线程2
radio 标签状态改变时触发事件
 多线程
 a标签点击后，给a标签添加样式
 servlet
mybatis 查询
 springmvc 发送PUT 和 DELETE 请求
原文地址：https://www.cnblogs.com/naonaoye/p/2949504.html