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

来源：互联网发布：mac方正字体下载编辑：程序博客网时间：2024/05/16 13:07

<html><head><script type="text/javascript">   var timeout         = 500;var closetimer= 0;var ddmenuitem      = 0;// open hidden layerfunction mopen(id){// cancel close timermcancelclosetime();// close old layerif(ddmenuitem) ddmenuitem.style.visibility = 'hidden';// get new layer and show itddmenuitem = document.getElementById(id);        if(ddmenuitem)ddmenuitem.style.visibility = 'visible';}// go close timerfunction mclosetime(){closetimer = window.setTimeout(mclose, timeout);}// close showed layerfunction mclose(){if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';}    // cancel close timerfunction mcancelclosetime(){if(closetimer){window.clearTimeout(closetimer);closetimer = null;}}// close layer when click-outdocument.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>

0 0

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

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