• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

纯JS脚本实现二级导航菜单

JavaScript 开心洋葱 3116次浏览 0个评论

<link rel="stylesheet" type="text/css" href="css/menu.css">
<!– dd menu –>
<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);
 ddmenuitem.style.visibility = 'visible';
 
}
// close showed layer
function mclose()
{
 if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
 
// go close timer
function mclosetime()
{
 closetimer = window.setTimeout(mclose, timeout);
}
 
// cancel close timer
function mcancelclosetime()
{
 if(closetimer)
 {
  window.clearTimeout(closetimer);
  closetimer = null;
 }
}
 
// close layer when click-out
document.onclick = mclose;
// –>
</script>
</head>
 
<body style="text-align:center">
<div id="mainHeader" >
<div id="headerTop"></div>
 
<div id="headerBottom">
<ul id="navmenu">
 <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">网站首页<span class="downArrow"></span></a>
  <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
  <a href="#">金伴侣</a>
  <a href="#">电子商务外包</a>
  <a href="#">网络营销人才</a>
  <a href="#">导航条代码</a>
  <a href="#">金伴侣网站推广</a>  </div>
 </li>
 <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">导航条代码<span class="downArrow"></span></a>
  <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
  <a href="#">金伴侣</a>
  <a href="#">电子商务外包</a>
  <a href="#">网络营销人才</a>
  <a href="#">导航条代码</a>
  <a href="#">金伴侣网站推广</a>  </div>
 </li>
 <li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">网络营销外包<span class="downArrow"></span></a>
  <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
  <a href="#">金伴侣</a>
  <a href="#">电子商务外包</a>
  <a href="#">网络营销人才</a>
  <a href="#">导航条代码</a>
  <a href="#">金伴侣网站推广</a>  </div>
 </li>
 <li class="newSash"><a href="#">金伴侣</a><span class="newSashSpan"></span>  
 </li>
 <li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">电子商务人才<span class="downArrow"></span></a>
  <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
  <a href="#">金伴侣</a>
  <a href="#">电子商务外包</a>
  <a href="#">网络营销人才</a>
  <a href="#">导航条代码</a>
  <a href="#">金伴侣网站推广</a> </div>
 </li>
 <li><a href="#">金伴侣网站推广</a>  #p#分页标题#e#
 </li>
 <li><a href="#">金伴侣网站建设</a>  
 </li> 
</ul>
</div>
 
</div>
</div>

 

样式就不贴出来了,自己可以根据自己的需求随意更改,可以改为二级菜单横线的样式也可以改为二级菜单竖向的样式,尽情发挥自己想想像吧,这个代码的好处就是不用JQUERY,可以自己定义ID名字,极大的杜绝了和其他代码的冲突问题,这样二级菜单可以正常的运行.


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明纯JS脚本实现二级导航菜单
喜欢 (0)

您必须 登录 才能发表评论!

加载中……