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>