仿126邮箱菜单基于JQuery设计

发布时间：2018-08-22 20:45:05 所属栏目：传媒来源：站长网

导读：此为鼠标悬停后所显示此图为鼠标点击后所显示在鼠标悬停情况下，如果不点击的话移开鼠标则显示复原，如果点击的话则如上图显示，但点击后鼠标离开后下拉菜单仍然在，只有在鼠标点击其他地方后下拉菜单才收回，而鼠标点击其他地方就成为核心要解决的问题

仿126邮箱菜单基于JQuery设计

　　此为鼠标悬停后所显示

仿126邮箱菜单基于JQuery设计

　　此图为鼠标点击后所显示

在鼠标悬停情况下，如果不点击的话移开鼠标则显示复原，如果点击的话则如上图显示，但点击后鼠标离开后下拉菜单仍然在，只有在鼠标点击其他地方后下拉菜单才收回，而鼠标点击其他地方就成为核心要解决的问题。

Copy to Clipboard Liehuo.Net Codes

引用的内容：[www.veryhuo.com] document.onclick = function (event)
{
var e = event || window.event;
var elem = e.srcElement||e.target;

while(elem)
{
if(elem.id == "subMenu")
{
return;
}
elem = elem.parentNode;
}
//隐藏subMenu方法
hideDiv();
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <style type="text/css"> body{margin: 0; padding: 0; /* for ie */ /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/ font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */ } .dropmenu{height:34px;background:url(/uploads/allimg/0911/menu_bg.gif) repeat-x;padding-top:4px;} .dropmenu li{height:34px;text-align:center;} .dropmenu .menu_t{float:left;margin-right:10px;} .tlBtn{height:29px;position:relative;line-height:29px;} .tl1{width:83px;text-align:center;padding-left:7px;} .tl12{width:71px;text-align:center;padding-left:7px;} .on .bLe{position:absolute;top:0px;left:0px;height:29px;width:4px; background:url(/uploads/allimg/0911/menu_sprite.gif) no-repeat;} .on .bRi{position:absolute;top:0px;right:0px;height:29px;width:4px; background:url(/uploads/allimg/0911/menu_sprite.gif) no-repeat;} .on .bLe{background-position:0px 0px;} .on .bRi{background-position:-132px 0px;} .on {background:url(/uploads/allimg/0911/menu_sprite.gif) no-repeat -4px 0px;cursor:pointer;} /*点击后*/ .click .bLe{position:absolute;top:0px;left:0px;height:29px;width:4px; background:url(/uploads/allimg/0911/menu_sprite.gif) no-repeat;} .click .bRi{position:absolute;top:0px;right:0px;height:29px;width:4px; background:url(/uploads/allimg/0911/menu_sprite.gif) no-repeat;} .click .bLe{background-position:0px -42px;} .click .bRi{background-position:-132px -42px;} .click {background:url(/uploads/allimg/0911/menu_sprite.gif) no-repeat -4px -42px;cursor:pointer;} .bIco{position:absolute;top:6px;left:4px;} .btnMove{width:23px;height:14px;background:url(/uploads/allimg/0911/menu_sprite.gif) no-repeat -150px -42px;position:absolute;top:7px;left:4px;} .btnDrop{width:7px;height:4px;position:absolute;top:13px;right:10px;background:url(/uploads/allimg/0911/menu_sprite.gif) no-repeat -166px -16px} .bTxt{display:block;line-height:29px;width:50px;height:29px;position:absolute;top:0px;left:28px;} .menu_list{position:absolute;top:29px;left:1px;width:115px;border:1px solid #99bac9;background-color:#f0f9fe;display:none;padding-left:2px;} .subMenu{display:none;position:absolute;left:112px;top:0px;width:115px;border:1px solid #99bac9;background-color:#f0f9fe;padding-left:2px;z-index:999;} .menu_list li{width:108px;height:20px;margin-top:1px;margin-bottom:1px;line-height:20px;text-align:left;padding-left:3px;border:1px solid #f0f9fe;} .li_hover{background-color:#fcf6ba;} .menu_list li span{position:absolute;top:7px;right:4px;width:4px;height:7px;background:url(/uploads/allimg/0911/menu_sprite.gif) no-repeat -169px 0px;} .bRi </style> <title>下拉菜单 - liehuo.net</title> </head> <body> <ul class="dropmenu"> <li class="menu_t"> <div title="移动到" class="tlBtn tl1" id="globalDiv"> 移动到 <div class="bLe"> </div> <div class="btnMove"></div> <div class="btnDrop"></div> <div class="bRi"> </div> <ul class="menu_list"> <li><a href="####">菜单项一</a></li> <li><a href="####">菜单项二</a> <ul class="subMenu"> <li><a href="####">菜单项一</a></li> <li><a href="####">菜单项二</a></li> </ul> </li> <li><a href="####">菜单项三</a> <ul class="subMenu"> <li><a href="####">菜单项一</a></li> <li><a href="####">菜单项二</a></li> </ul> </li> </ul> </div> </li> <li class="menu_t"> <div title="删除" class="tlBtn tl12" id="globalDiv"> 删除 <div class="bLe"> </div> <div class="btnMove"></div> <div class="btnDrop"></div> <div class="bRi"> </div> <ul class="menu_list"> <li><a href="####">菜单项一</a></li> <li><a href="####">菜单项二</a> <ul class="subMenu"> <li><a href="####">菜单项一</a></li> <li><a href="####">菜单项二</a></li> </ul> </li> <li><a href="####">菜单项三</a> <ul class="subMenu"> <li><a href="####">菜单项一</a></li> <li><a href="####">菜单项二</a></li> </ul> </li> </ul> </div> </li> <li class="menu_t"> <div title="查看" class="tlBtn tl12" id="globalDiv"> 查看 <div class="bLe"> </div> <div class="btnMove"></div> <div class="btnDrop"></div> <div class="bRi"> </div> <ul class="menu_list"> <li><a href="####">菜单项一</a></li> <li><a href="####">菜单项二</a> <ul class="subMenu"> <li><a href="####">菜单项一</a></li> <li><a href="####">菜单项二</a></li> </ul> </li> <li><a href="####">菜单项三</a> <ul class="subMenu"> <li><a href="####">菜单项一</a></li> <li><a href="####">菜单项二</a></li> </ul> </li> </ul> </div> </li> </ul> <script type="text/javascript" src="http://www.veryhuo.com/uploads/Common/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(function(){ $(".tlBtn").hover( function(){$(this).addClass("on").click(function(){ $(".tlBtn").removeClass("click"); $(".menu_list").hide(); $(this).addClass("click").children(".menu_list").show(); document.onclick = function (event) { var e = event || window.event; var elem = e.srcElement||e.target; while(elem) { if(elem.id == "globalDiv") { return; } elem = elem.parentNode; } //隐藏div $(".menu_list").hide(1,function(){$(this).parent(".tlBtn").removeClass("click")}); } });}, function(){$(this).removeClass("on")} ) $(".menu_list li").hover( function(){$(this).addClass("li_hover").css("border","1px solid #edcb83")}, function(){$(this).removeClass("li_hover").css("border","1px solid #f0f9fe")} ); $(".subMenu").before("<span></span>"); $(".subMenu").parent("li").css("position","relative").hover( function(){$(this).children(".subMenu").show();}, function(){$(this).children(".subMenu").hide();} ); }) </script> </body> </html>
提示：可修改后代码再运行!

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

仿126邮箱菜单 基于JQuery设计

仿126邮箱菜单基于JQuery设计