您的位置：首页 > Web前端 > JQuery

一个调用jQuery-menu-aim插件的小Demo

2013-03-08 11:02 302 查看

今天看到新闻讲到了Amazon反应超快的下拉菜单，于是去看了下

插件的GitHub地址：https://github.com/kamens/jQuery-menu-aim

自己做了一个小Demo，代码如下：

View Code

<html>
<head>
<meta charset="utf-8">
<title>amazonMenu</title>
<script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
<script type="text/javascript" src="./jquery.menu-aim.js"></script>
<style>
body{
font-family:微软雅黑;
font-size:16px;
}
.menuBtn{
position:absolute;
top:10px;
left:10px;
width:80px;
padding-left:20px;
height:20px;
line-height:20px;
color:white;
background-color:black;
}
.menuTips{
position:absolute;
top:10px;
left:110px;
width:380px;
}
.menuMain{
position:absolute;
top:30px;
left:10px;
width:200px;
background-color:white;
border:solid 1px gray;
border-top:solid 2px black;

}
.menuUl{
list-style-type:none;
padding:0px;
margin:0px;
}
.menuLi{
padding:3px;
height:20px;
line-height:20px;
cursor:default;
}
.menuLi:hover{
color:#ab36c9;
font-weight:bolder;
}
.menuSub{
position:absolute;
top:30px;
left:210px;
width:190px;
padding-left:10px;
background-color:white;
border:solid 1px gray;
border-top:solid 2px black;
display:none;
}
</style>
</head>
<body>
<span id="menuBtn" class="menuBtn">菜单</span>
<span id="menuTips" class="menuTips"></span>
<div id="menuMain" class="menuMain">
<ul id="menuUl" class="menuUl" >
<li class="menuLi" id="menuLi_1">11</li>
<li class="menuLi" id="menuLi_2">22</li>
<li class="menuLi" id="menuLi_3">33</li>
<li class="menuLi" id="menuLi_4">44</li>
<li class="menuLi" id="menuLi_5">55</li>
<li class="menuLi" id="menuLi_6">66</li>
</ul>
</div>
<div id="menuSub_1" class="menuSub">
11
</div>
<div id="menuSub_2" class="menuSub">
22
</div>
<div id="menuSub_3" class="menuSub">
33
</div>
<div id="menuSub_4" class="menuSub">
44
</div>
<div id="menuSub_5" class="menuSub">
55
</div>
<div id="menuSub_6" class="menuSub">
66
</div>
</body>
<script type="text/javascript">
$(".menuSub").css("height",$(".menuMain").css("height"));
$("#menuUl").menuAim({
activate:function(li){
var menuId = ($(li).attr("id")+"").split('_')[1];
$("#menuTips").html(menuId);
$("#menuSub_"+menuId).show();
},
deactivate:function(){
$(".menuSub").hide();
},
enter:function(){
$("#menuTips").html("enter");
this.activate();
},
exit:function(){
$("#menuTips").html("exit");

}
});
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航