您當前位置：首頁 > web前端 > jquery > 仿126郵箱菜單基于JQuery設計

仿126郵箱菜單基于JQuery設計

來源：程序員人生發布時間：2013-10-18 05:15:02 閱讀次數：3979次

　　此為鼠標懸停后所顯示

　　此圖為鼠標點擊后所顯示

在鼠標懸停情況下，如果不點擊的話移開鼠標則顯示復原，如果點擊的話則如上圖顯示，但點擊后鼠標離開后下拉菜單仍然在，只有在鼠標點擊其他地方后下拉菜單才收回，而鼠標點擊其他地方就成為核心要解決的問題。

<!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.vxbq.cn/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設計