通过本文主要向大家介绍了鼠标悬浮,二级菜单等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
1.布局：
<div class="show"> <img src="~/images/head_icon.png" /> <div class="drop" style=" display:none; z-index:80000" id="profileMenu"> <ul> <li> <a class="pass" style="cursor: pointer" href='#'> <span>修改密码</span> </a> </li> <li> <a class="quit" style="cursor: pointer" href='#' ><span>退出</span></a> </li> </ul> </div> </div>
2.js控制：
function dropMenu(obj) {
$(obj).each(function () {
var theSpan = $(this);
var theMenu = theSpan.find(".drop");
var tarHeight = theMenu.height();
theMenu.css({ height: 0, opacity: 0 });
var t1;
function expand() {
clearTimeout(t1);
//theSpan.find('a').addClass("selected");
theMenu.stop().show().animate({ height: tarHeight, opacity: 1 }, 200);
}
function collapse() {
clearTimeout(t1);
t1 = setTimeout(function () {
// theSpan.find('a').removeClass("selected");
theMenu.stop().animate({ height: 0, opacity: 0 }, 200, function () {
$(this).css({ display: "none" });
});
}, 250);
}
theSpan.hover(expand, collapse);
theMenu.hover(expand, collapse);
});
}