您的位置：首页 > Web前端 > JavaScript

js实现导航栏二级菜单hover下拉效果

2015-05-12 16:41 866 查看

<html>
<head>
<script type="text/javascript">
var timeout         = 500;
var closetimer		= 0;
var ddmenuitem      = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
if(ddmenuitem)ddmenuitem.style.visibility = 'visible';

}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;
</script>
</head>
<body>
  <div class="headerTop">
   <ul id="navmenu">
    <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()" disabled="disabled">m1<span class="downArrow"></span></a>
<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">    
          <a href="#" class="none">m1-1</a>
          <a href="#" class="none">m1-2</a>
        </div>
</li>
    <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()" disabled="disabled">m2<span class="downArrow"></span></a>
        <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">    
          <a href="#" class="none">m2-1</a>
          <a href="#" class="none">m2-2</a>
        </div>
    </li>
</ul>
 </div>

</body>
</head>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 二级导航栏hover下拉

相关文章推荐

新的分享

章节导航

js实现 导航栏二级菜单hover下拉效果

js实现导航栏二级菜单hover下拉效果