仿QQ下拉菜单

最新推荐文章于 2024-09-14 18:46:05 发布

haiwei_sun

最新推荐文章于 2024-09-14 18:46:05 发布

阅读量597

点赞数

分类专栏： jquery 文章标签： qq class function div xhtml java

本文链接：https://blog.csdn.net/helen_shw/article/details/5139558

版权

jquery 专栏收录该内容

102 篇文章 0 订阅

订阅专栏

<!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>

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;
}
}

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(http://codefans.net/jscss/demoimg/200902/more_soft.gif) repeat-x left top; }
h2 span em{
font-style:normal; display:block; background:url(http://codefans.net/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 class="main">
<div>
   <div class="part1">
     <div class="version">
          <div class="padder">
   <h2 οnmοuseοver="showMoreSoftware(this,'softList')" οnmοuseοut="hideMoreSoftware()" class="normal"><div><span><em>源码爱好者导航栏</em></span></div></h2>
              <div class="softList" id="softList" οnmοuseοver="showMoreSoftware()" οnmοuseοut="hideMoreSoftware()">
               <a class="drawingPin" href="javascript:void(0);" οnclick="lockMenu()" id="lockBtn" title="固定"></a>
                <div class="qq">
                <h3>ASP资源</h3>
                    <ul>
                        <li><a οnclick="hidingMenu()" href="/sort/list_1_13_1.shtml" target="_blank">优秀论坛社区程序</a></li>
                        <li><a οnclick="hidingMenu()" href="/sort/list_1_29_1.shtml" target="_blank">CMS系统建站资源</a></li>
                        <li><a οnclick="hidingMenu()" href="/sort/list_1_145_1.shtml" target="_blank">著名博客日记系统</a></li>
                    </ul>
                </div>
                <div class="others">
                 <div class="left">
      <h3>PHP资源</h3>
                        <ul>
                            <li><a οnclick="hidingMenu()" href="/sort/list_2_35_1.shtml" target="_blank">企业建站</a></li>
                            <li><a οnclick="hidingMenu()" href="/sort/list_2_34_1.shtml" target="_blank">留言程序</a></li>
                            <li><a οnclick="hidingMenu()" href="/sort/list_2_47_1.shtml" target="_blank">相册系统</a></li>
                        </ul>
                        <h3>JAVA实例</h3>
                        <ul class="last">
                            <li><a οnclick="hidingMenu()" href="/sort/list_5_80_1.shtml" target="_blank">游戏编程</a></li>
                            <li><a οnclick="hidingMenu()" href="/sort/list_5_99_1.shtml" target="_blank">JAVA窗体</a></li>
                            <li><a οnclick="hidingMenu()" href="/sort/list_5_82_1.shtml" target="_blank">媒体与网络</a></li>
                        </ul>
                    </div>
                    <div class="right">
                     <h3>脚本资源</h3>
                        <ul>
                            <li><a οnclick="hidingMenu()" href="/sort/list_11_203_1.shtml" target="_blank">AJAX资源</a></li>
                            <li><a οnclick="hidingMenu()" href="/sort/list_11_168_1.shtml" target="_blank">CSS特效</a></li>
                            <li><a οnclick="hidingMenu()" href="/sort/list_11_202_1.shtml" target="_blank">网页编辑器</a></li>
                        </ul>
                        <h3>生活品味</h3>
                        <ul>
                            <li><a οnclick="hidingMenu()" href="/sort/list_7_228_1.shtml" target="_blank">AJAX教程</a></li>
                            <li><a οnclick="hidingMenu()" href="/sort/list_7_136_1.shtml" target="_blank">JAVA开发</a></li>
                        </ul>
                    </div>
                </div>
              </div>
          </div>
        </div>
      </div>
</div>
</body>
</html>