鼠標放上彈出仿QQ下拉菜單的代碼

2024-09-05 12:19:18

字體：大中小

來源：轉載

供稿：網友

在DISCUZ論壇，BBSMAX論壇以及QQ網站經常會看到這種效果，鼠標移上文字滑出一個菜單層，層里面可以自定義菜單內容，鼠標移走后菜單消失，不影響網頁整體布局，網頁的整體形狀也不會發生任何變化。

<!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><title>仿QQ下拉菜單</title><script type="text/javascript"> var g_parent,g_child;var g_hideTimer = null;var g_locked = false;function $id(id){ return document.getElementById(id);}function getPos(parentObj){ var parentPos = []; parentPos[0] = parentObj.offsetLeft;//x parentPos[1] = parentObj.offsetTop;//y while (parentObj = parentObj.offsetParent) {  parentPos[0] += parentObj.offsetLeft;  parentPos[1] += parentObj.offsetTop; } return parentPos;}function showMoreSoftware(parentObj,childName){ if (g_hideTimer != null) {  clearTimeout(g_hideTimer);  return; } var parentPos = getPos(parentObj); $id(childName).style.left = parentPos[0] + "px"; $id(childName).style.top = parentPos[1] + 26 + "px"; $id("lockBtn").style.left = "163px"; parentObj.className = "active"; $id(childName).style.display = "block"; g_parent = parentObj; g_child = $id(childName);}function hideMoreSoftware(){ if (g_locked == true) {  return; } else {  g_hideTimer = setTimeout(function(){hidingMenu();},1); }}function hidingMenu(){ g_parent.className = "normal"; g_child.style.display = "none"; clearTimeout(g_hideTimer); g_hideTimer = null; if (g_locked == true) {  $id("lockBtn").className = "drawingPin";  g_locked = false; }}function lockMenu(){ if (g_locked == false) {  $id("lockBtn").className = "drawingPin_2";  $id("lockBtn").title="解除固定";  g_locked = true; } else {  $id("lockBtn").className = "drawingPin";  $id("lockBtn").title="固定";  g_locked = false; }}</script><style>*:lang(en) .newHeader .nav{ margin-top:30px;}a:link,a:visited,a:active{ color:#3372a2; text-decoration:none;}a:hover{ text-decoration:underline;}h2{ padding:0; margin:0; font-weight:bold; font-size:12px; height:28px; width:142px;}h2.active{ background:#99c9e3;}h2 div{ position:absolute; padding:1px 1px 0 1px; margin:1px 1px 0 1px; width:138px; overflow:hidden; z-index:10; cursor:pointer;}h2.active div{ background:white;}h2 span{ display:block; padding:0 9px; height:26px;}h2.active span{ background:url(/jscss/demoimg/200902/more_soft.gif) repeat-x left top; }h2 span em{ font-style:normal; display:block; background:url(/jscss/demoimg/200902/more_soft.gif) no-repeat right -26px; padding-right:15px; line-height:25px;} .softList{ position:absolute; background:white; border:1px #99c9e3 solid; z-index:9; padding:5px 10px; width:165px; display:none;}.left{ float:left; width:50%;}.right{ float:right; width:50%;}h3{ color:#cc6600; margin:0; padding:0; font-size:14px; font-weight:bolder;}ul{ margin:0; padding:0 0 20px 0;}ul.last{ padding:0;}ul li{ height:auto; line-height:18px; }ul li a{ font-size:12px;}</style></head><body><div   id="iwvjtn8m0"   class="main"> <div>   <div   id="iwvjtn8m0"   class="part1">     <div   id="iwvjtn8m0"   class="version">          <div   id="iwvjtn8m0"   class="padder">   <h2 onmouseover="showMoreSoftware(this,'softList')" onmouseout="hideMoreSoftware()" class="normal"><div><span><em>源碼愛好者導航欄</em></SPAN>
</div>
</div>
<div   id="iwvjtn8m0"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="iwvjtn8m0"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-05/1557210.html'>CSS實現的Vista風格菜單</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-05/1557212.html'>div+css+js實現菜單的收縮與展開</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="iwvjtn8m0"   class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

學習交流