Jquery 是一个轻量的框架，个人认为非常好用，今天就写一个非常简单的例子，实现下拉菜单功能；
首先肯定要在页面引用jquery.js 版本不限 ；
接下来把=====================html贴出来：
菜单**/
.header_menu{
float:right;
width: 50%;
height: 100%;
cursor: pointer;
}
.header_menu ul{
list-style: none;
height: 100%;
}
.header_menu ul li{
float: right;
width: 20%;
color:white;
font-size:14px;
padding-top: 55px;
font-weight: bold;
}
.
display{
display: none;
}
.
display ul{
list-style: none;
width: 100px;
}
.
display ul li{
padding-top:10px;
padding-b
ottom: 5px;
padding-left:5px;
cursor: pointer;
font-size: 14px;
}
.movediv{
position: fixed;
left: 0px;
top:0px;
font-size: 14px;
white;
border:1px solid white;
}
.redcolor{
#a0c9e6;
}
菜单绑定事件
initMenuListener();
// 下拉
菜单绑定事件
initSubMenuHover();
// 下拉
菜单颜色改变
initSubMenuLiHover();
});
/**
* 头部
菜单绑定滑过事件
*/
function initMenuListener() {
$(“.menuli”).hover(function() {
var hideDivId = $(this).attr(“id”) + “_div”;
// 得到
菜单的位置
var left = $(this).offset().left;
var top = $(this).offset().top;
var height = $(this).outerHeight();//outerHeight是
获取高度，
包括内边距，height是也是
获取高度，不过只
包括文本高度
$(“#” + hideDivId).show();
$(“#” + hideDivId).css(“left”,left);
$(“#” + hideDivId).css(“top”,top + height);
},function() {
// 将原来的
菜单隐藏
$(“.
display”).hide();
});
}
/**
* 下拉
菜单绑定事件
*/
function initSubMenuHover() {
$(“.
display”).hover(function() {
$(this).show();
},function() {
$(this).hide();
});
}
/**
* 下拉
菜单改变颜色
*/
function initSubMenuLiHover() {
$(“.redli”).hover(function() {
$(this).addClass(“redcolor”);
},function() {
$(this).removeClass(“redcolor”);
});
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
