您当前位置：首页 > web前端 > jquery > 仿126邮箱菜单基于JQuery设计

仿126邮箱菜单基于JQuery设计

来源：程序员人生发布时间：2013-10-18 05:15:02 阅读次数：3803次

　　此为鼠标悬停后所显示

　　此图为鼠标点击后所显示

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

<!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.wfuyu.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>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 实例代码：用html语言显示xml中的数据

下一篇 Cisco路由器IOS的备份和恢复分析

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点

仿126邮箱菜单 基于JQuery设计

仿126邮箱菜单基于JQuery设计