首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS实现带有抽屉效果的产品类网站多级导航菜单代码

Posted in Javascript onSeptember 15, 2015

本文实例讲述了JS实现带有抽屉效果的产品类网站多级导航菜单代码。分享给大家供大家参考。具体如下：

这是一款像抽屉一样的菜单，多用在产品网站，比如IT产品网站的分类导航上，菜单结构清淅，样式新颖，设计美观，主要是运用JavaScript技术实现，用CSS配合实现菜单背景的构建，总体来说，是学习Js多级分类菜单的好范例。

运行效果截图如下：

JS实现带有抽屉效果的产品类网站多级导航菜单代码

在线演示地址如下：

具体代码如下：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>抽屉式菜单</title>
<script type="text/javascript">
 function setturns(i){
  selectturns(i);
 }
 function selectturns(i){
  switch(i){
   case 1:
   document.getElementById("t2").className="this";
   document.getElementById("t3").className="this2";
   document.getElementById("t4").className="bg02";
   document.getElementById("t5").className="bg02";
   document.getElementById("t6").className="bg02";
   document.getElementById("t7").className="bg02";
   document.getElementById("t8").className="bg02";
   document.getElementById("p1").style.display="block";
   document.getElementById("p2").style.display="none";
   document.getElementById("p3").style.display="none";
   document.getElementById("p4").style.display="none";
   document.getElementById("p5").style.display="none"; 
   document.getElementById("p6").style.display="none";
   break;
   case 2:
   document.getElementById("t2").className="bg02";
   document.getElementById("t3").className="this";
   document.getElementById("t4").className="this2";
   document.getElementById("t5").className="bg02";
   document.getElementById("t6").className="bg02";
   document.getElementById("t7").className="bg02"; 
   document.getElementById("t8").className="bg02";
  document.getElementById("p1").style.display="none";
   document.getElementById("p2").style.display="block";
   document.getElementById("p3").style.display="none";
   document.getElementById("p4").style.display="none";
   document.getElementById("p5").style.display="none";
   document.getElementById("p6").style.display="none";
   break;
   case 3:
   document.getElementById("t2").className="bg02";
   document.getElementById("t3").className="bg02";
   document.getElementById("t4").className="this";
   document.getElementById("t5").className="this2";
   document.getElementById("t6").className="bg02";
   document.getElementById("t7").className="bg02";
   document.getElementById("t8").className="bg02";
   document.getElementById("p1").style.display="none";
   document.getElementById("p2").style.display="none";
   document.getElementById("p3").style.display="block";
   document.getElementById("p4").style.display="none";
   document.getElementById("p5").style.display="none";
   document.getElementById("p6").style.display="none";
   break;
   case 4:
   document.getElementById("t2").className="bg02";
   document.getElementById("t3").className="bg02";
   document.getElementById("t4").className="bg02";
   document.getElementById("t5").className="this";
   document.getElementById("t6").className="this2";
   document.getElementById("t7").className="bg02";
   document.getElementById("t8").className="bg02";
   document.getElementById("p1").style.display="none";
   document.getElementById("p2").style.display="none";
   document.getElementById("p3").style.display="none";
   document.getElementById("p4").style.display="block";
   document.getElementById("p5").style.display="none";
   document.getElementById("p6").style.display="none";
   break;
   case 5:
   document.getElementById("t2").className="bg02";
   document.getElementById("t3").className="bg02";
   document.getElementById("t4").className="bg02";
   document.getElementById("t5").className="bg02";
   document.getElementById("t6").className="this";
   document.getElementById("t7").className="this2";
   document.getElementById("t8").className="bg02";
  document.getElementById("p1").style.display="none";
   document.getElementById("p2").style.display="none";
   document.getElementById("p3").style.display="none";
   document.getElementById("p4").style.display="none";
   document.getElementById("p5").style.display="block";
   document.getElementById("p6").style.display="none";
    break;
   case 6:
   document.getElementById("t2").className="bg02";
   document.getElementById("t3").className="bg02";
   document.getElementById("t4").className="bg02";
   document.getElementById("t5").className="bg02";
   document.getElementById("t6").className="bg02";
   document.getElementById("t7").className="this";
   document.getElementById("t8").className="this2";
  document.getElementById("p1").style.display="none";
   document.getElementById("p2").style.display="none";
   document.getElementById("p3").style.display="none";
   document.getElementById("p4").style.display="none";
   document.getElementById("p5").style.display="none";
   document.getElementById("p6").style.display="block";
  }
 }
function setturns2(i){
  selectturns2(i);
 }
 function selectturns2(i){
  switch(i){
   case 1:
   document.getElementById("b1").className="on";
   document.getElementById("b2").className="";
   document.getElementById("b3").className="";
   document.getElementById("b4").className="";
   document.getElementById("b5").className="";
   document.getElementById("s1").style.display="block";
   document.getElementById("s2").style.display="none";
   document.getElementById("s3").style.display="none";
   document.getElementById("s4").style.display="none";
   document.getElementById("s5").style.display="none";
   break;
   case 2:
   document.getElementById("b1").className="";
   document.getElementById("b2").className="on";
   document.getElementById("b3").className="";
   document.getElementById("b4").className="";
   document.getElementById("b5").className="";
   document.getElementById("s1").style.display="none";
   document.getElementById("s2").style.display="block";
   document.getElementById("s3").style.display="none";
   document.getElementById("s4").style.display="none";
   document.getElementById("s5").style.display="none";
   break;
   case 3:
   document.getElementById("b1").className="";
   document.getElementById("b2").className="";
   document.getElementById("b3").className="on";
   document.getElementById("b4").className="";
   document.getElementById("b5").className="";
   document.getElementById("s1").style.display="none";
   document.getElementById("s2").style.display="none";
   document.getElementById("s3").style.display="block";
   document.getElementById("s4").style.display="none";
   document.getElementById("s5").style.display="none";
   break;
   case 4:
   document.getElementById("b1").className="";
   document.getElementById("b2").className="";
   document.getElementById("b3").className="";
   document.getElementById("b4").className="on";
   document.getElementById("b5").className="";
   document.getElementById("s1").style.display="none";
   document.getElementById("s2").style.display="none";
   document.getElementById("s3").style.display="none";
   document.getElementById("s4").style.display="block";
   document.getElementById("s5").style.display="none";
   break;
   case 5:
   document.getElementById("b1").className="";
   document.getElementById("b2").className="";
   document.getElementById("b3").className="";
   document.getElementById("b4").className="";
   document.getElementById("b5").className="on";
   document.getElementById("s1").style.display="none";
   document.getElementById("s2").style.display="none";
   document.getElementById("s3").style.display="none";
   document.getElementById("s4").style.display="none";
   document.getElementById("s5").style.display="block";
  }
 }
function setturns3(i){
  selectturns3(i);
 }
 function selectturns3(i){
  switch(i){
   case 1: 
   document.getElementById("t2").className="this";
   document.getElementById("t3").className="this2";
  document.getElementById("p1").style.display="block";
   document.getElementById("s1").style.display="block";
   document.getElementById("s2").style.display="none";
   document.getElementById("s3").style.display="none";
   document.getElementById("s4").style.display="none";  
   document.getElementById("s5").style.display="none";
   break;
   case 2:
  document.getElementById("t2").className="this";
   document.getElementById("t3").className="this2";
  document.getElementById("p1").style.display="block";
   document.getElementById("s1").style.display="none";
   document.getElementById("s2").style.display="block";
   document.getElementById("s3").style.display="none";
   document.getElementById("s4").style.display="none";
   document.getElementById("s5").style.display="none";
   break;
   case 3: 
   document.getElementById("t2").className="this";
   document.getElementById("t3").className="this2";
  document.getElementById("p1").style.display="block";
   document.getElementById("s1").style.display="none";
   document.getElementById("s2").style.display="none";
   document.getElementById("s3").style.display="block";
   document.getElementById("s4").style.display="none";
   document.getElementById("s5").style.display="none";
   break;
   case 4:
   document.getElementById("t2").className="this";
   document.getElementById("t3").className="this2";
  document.getElementById("p1").style.display="block";
   document.getElementById("s1").style.display="none";
   document.getElementById("s2").style.display="none";
   document.getElementById("s3").style.display="none";
   document.getElementById("s4").style.display="block";
   document.getElementById("s5").style.display="none";
   break;
   case 5:
   document.getElementById("t2").className="this";
   document.getElementById("t3").className="this2";
  document.getElementById("p1").style.display="block";
   document.getElementById("s1").style.display="none";
   document.getElementById("s2").style.display="none";
   document.getElementById("s3").style.display="none";
   document.getElementById("s4").style.display="none";
   document.getElementById("s5").style.display="block";
  }
 }
 function setturns4(i){
  selectturns4(i);
 }
 function selectturns4(i){
  switch(i){
   case 1:
   document.getElementById("z1").className="on";
   document.getElementById("z2").className="";
   document.getElementById("z3").className="";
   document.getElementById("z4").className="";
   document.getElementById("z5").className="";
   document.getElementById("z6").className="";
   document.getElementById("z7").className="";
   document.getElementById("w1").style.display="block";
   document.getElementById("w2").style.display="none";
   document.getElementById("w3").style.display="none";
   document.getElementById("w4").style.display="none";
   document.getElementById("w5").style.display="none";
   document.getElementById("w6").style.display="none";
   document.getElementById("w7").style.display="none";
   break;
   case 2:
   document.getElementById("z1").className="";
   document.getElementById("z2").className="on";
   document.getElementById("z3").className="";
   document.getElementById("z4").className="";
   document.getElementById("z5").className="";
   document.getElementById("z6").className="";
   document.getElementById("z7").className="";
   document.getElementById("w1").style.display="none";
   document.getElementById("w2").style.display="block";
   document.getElementById("w3").style.display="none";
   document.getElementById("w4").style.display="none";
   document.getElementById("w5").style.display="none";
   document.getElementById("w6").style.display="none";
   document.getElementById("w7").style.display="none";
   break;
   case 3:
   document.getElementById("z1").className="";
   document.getElementById("z2").className="";
   document.getElementById("z3").className="on";
   document.getElementById("z4").className="";
   document.getElementById("z5").className="";
   document.getElementById("z6").className="";
   document.getElementById("z7").className="";
   document.getElementById("w1").style.display="none";
   document.getElementById("w2").style.display="none";
   document.getElementById("w3").style.display="block";
   document.getElementById("w4").style.display="none";
   document.getElementById("w5").style.display="none";
   document.getElementById("w6").style.display="none";
   document.getElementById("w7").style.display="none";
   break;
   case 4:
   document.getElementById("z1").className="";
   document.getElementById("z2").className="";
   document.getElementById("z3").className="";
   document.getElementById("z4").className="on";
   document.getElementById("z5").className="";
   document.getElementById("z6").className="";
   document.getElementById("z7").className="";
   document.getElementById("w1").style.display="none";
   document.getElementById("w2").style.display="none";
   document.getElementById("w3").style.display="none";
   document.getElementById("w4").style.display="block";
   document.getElementById("w5").style.display="none";
   document.getElementById("w6").style.display="none";
   document.getElementById("w7").style.display="none";
   break;
   case 5:
   document.getElementById("z1").className="";
   document.getElementById("z2").className="";
   document.getElementById("z3").className="";
   document.getElementById("z4").className="";
   document.getElementById("z5").className="on";
   document.getElementById("z6").className="";
   document.getElementById("z7").className="";
   document.getElementById("w1").style.display="none";
   document.getElementById("w2").style.display="none";
   document.getElementById("w3").style.display="none";
   document.getElementById("w4").style.display="none";
   document.getElementById("w5").style.display="block";
   document.getElementById("w6").style.display="none";
   document.getElementById("w7").style.display="none";
   break;
   case 6:
   document.getElementById("z1").className="";
   document.getElementById("z2").className="";
   document.getElementById("z3").className="";
   document.getElementById("z4").className="";
   document.getElementById("z5").className="";
   document.getElementById("z6").className="on";
   document.getElementById("z7").className="";
   document.getElementById("w1").style.display="none";
   document.getElementById("w2").style.display="none";
   document.getElementById("w3").style.display="none";
   document.getElementById("w4").style.display="none";
   document.getElementById("w5").style.display="none";
   document.getElementById("w6").style.display="block";
   document.getElementById("w7").style.display="none";
   break;
   case 7:
   document.getElementById("z1").className="";
   document.getElementById("z2").className="";
   document.getElementById("z3").className="";
   document.getElementById("z4").className="";
   document.getElementById("z5").className="";
   document.getElementById("z6").className="";
   document.getElementById("z7").className="on";
   document.getElementById("w1").style.display="none";
   document.getElementById("w2").style.display="none";
   document.getElementById("w3").style.display="none";
   document.getElementById("w4").style.display="none";
   document.getElementById("w5").style.display="none";
   document.getElementById("w6").style.display="none";
   document.getElementById("w7").style.display="block";
  }
 }
 function setturns5(i){
  selectturns5(i);
 }
 function selectturns5(i){
  switch(i){
   case 1:
   document.getElementById("t5").className="this";
   document.getElementById("t6").className="this2";
  document.getElementById("p4").style.display="block";
   document.getElementById("w1").style.display="block";
   document.getElementById("w2").style.display="none";
   document.getElementById("w3").style.display="none";
   document.getElementById("w4").style.display="none";
   document.getElementById("w5").style.display="none";
   document.getElementById("w6").style.display="none";
   document.getElementById("w7").style.display="none";
   break;
   case 2:
   document.getElementById("t5").className="this";
   document.getElementById("t6").className="this2";
  document.getElementById("p4").style.display="block";
   document.getElementById("w1").style.display="none";
   document.getElementById("w2").style.display="block";
   document.getElementById("w3").style.display="none";
   document.getElementById("w4").style.display="none";
   document.getElementById("w5").style.display="none";
   document.getElementById("w6").style.display="none";
   document.getElementById("w7").style.display="none";
   break;
   case 3:
   document.getElementById("t5").className="this";
   document.getElementById("t6").className="this2";
  document.getElementById("p4").style.display="block";
   document.getElementById("w1").style.display="none";
   document.getElementById("w2").style.display="none";
   document.getElementById("w3").style.display="block";
   document.getElementById("w4").style.display="none";
   document.getElementById("w5").style.display="none";
   document.getElementById("w6").style.display="none";
   document.getElementById("w7").style.display="none";
   break;
   case 4:
   document.getElementById("t5").className="this";
   document.getElementById("t6").className="this2";
  document.getElementById("p4").style.display="block";
   document.getElementById("w1").style.display="none";
   document.getElementById("w2").style.display="none";
   document.getElementById("w3").style.display="none";
   document.getElementById("w4").style.display="block";
   document.getElementById("w5").style.display="none";
   document.getElementById("w6").style.display="none";
   document.getElementById("w7").style.display="none";
   break;
   case 5:
   document.getElementById("t5").className="this";
   document.getElementById("t6").className="this2";
  document.getElementById("p4").style.display="block";
   document.getElementById("w1").style.display="none";
   document.getElementById("w2").style.display="none";
   document.getElementById("w3").style.display="none";
   document.getElementById("w4").style.display="none";
   document.getElementById("w5").style.display="block";
   document.getElementById("w6").style.display="none";
   document.getElementById("w7").style.display="none";
   break;
   case 6:
   document.getElementById("t5").className="this";
   document.getElementById("t6").className="this2";
  document.getElementById("p4").style.display="block";
   document.getElementById("w1").style.display="none";
   document.getElementById("w2").style.display="none";
   document.getElementById("w3").style.display="none";
   document.getElementById("w4").style.display="none";
   document.getElementById("w5").style.display="none";
   document.getElementById("w6").style.display="block";
   document.getElementById("w7").style.display="none";
   //download by https://3water.com
   break;
   case 7:
   document.getElementById("t5").className="this";
   document.getElementById("t6").className="this2";
  document.getElementById("p4").style.display="block";
   document.getElementById("w1").style.display="none";
   document.getElementById("w2").style.display="none";
   document.getElementById("w3").style.display="none";
   document.getElementById("w4").style.display="none";
   document.getElementById("w5").style.display="none";
   document.getElementById("w6").style.display="none";
   document.getElementById("w7").style.display="block";
  }
 }
function setturnsout(i){
  selectturnsout(i);
 }
 function selectturnsout(i){
  switch(i){
   case 1:
   document.getElementById("t2").className="bg02";
   document.getElementById("t3").className="bg02";
   document.getElementById("t4").className="bg02";
   document.getElementById("t5").className="bg02";
   document.getElementById("t6").className="bg02";
   document.getElementById("t7").className="bg02";
   document.getElementById("t8").className="bg02";
   document.getElementById("p1").style.display="none";
   document.getElementById("p2").style.display="none";
   document.getElementById("p3").style.display="none";
   document.getElementById("p4").style.display="none";
   document.getElementById("p5").style.display="none";
   document.getElementById("p6").style.display="none";
   document.getElementById("s1").style.display="none";
   document.getElementById("s2").style.display="none";
   document.getElementById("s3").style.display="none";
   document.getElementById("s4").style.display="none";
   document.getElementById("s5").style.display="none";
   document.getElementById("w1").style.display="none";
   document.getElementById("w2").style.display="none";
   document.getElementById("w3").style.display="none";
   document.getElementById("w4").style.display="none";
   document.getElementById("w5").style.display="none";
   document.getElementById("w6").style.display="none";
   document.getElementById("w7").style.display="none";   
  }
 }
</script>
<style type="text/css"> 
body{ margin:0; padding:0; background:url(images/search_bg.gif) repeat-x; font-size:12px;}
ul,li{ margin:0; padding:0; list-style:none;}
 .link_box{ width:240px; background:url(images/search_bg.gif) repeat-x; padding-bottom:20px; height:295px;}
.link_box .prdct{ width:234px; margin-top:15px; float:right; position:relative;}
.link_box .prdct p{ position:absolute; background:url(images/cpzg.gif) repeat-y; height:32px; line-height:30px; width:234px;}
.link_box .prdct p a{ display:block; height:32px; width:190px; padding-right:44px; text-align:right;color:#004FA3; text-decoration:none; cursor:pointer;}
.link_box .prdct p a:hover{ text-decoration:none; color:#C40000;}
.link_box .prdct p.bg01{ background-position:0 0px;}
.link_box .prdct p.bg02{ background-position:0 -32px; }
.link_box .prdct p.bg07{background-position:0 -212px; }
.link_box .prdct p.this{ background-position:0 -61px; width:250px;}
.link_box .prdct p.this2{background-position:0 -91px; width:250px;}
.link_box .prdct p.this2 a{ margin-left:15px; color:#C40000; text-decoration:none;}
#t1{ top:0;}
#t2{top:32px;}
#t3{top:64px;}
#t4{top:96px;}
#t5{top:128px;}
#t6{top:160px;}
#t7{top:192px;}
#t8{top:224px;}
#t9{top:256px;}
.prdct .p_son{ width:200px; background:#F1F1F1;border:1px solid #cbcbcb; border-bottom:none; position:absolute; left:250px;display:none; }
.p_son li,.s_son li{ height:30px; line-height:30px; border:1px solid #fff; border-bottom:#cbcbcb; text-align:left; }
.p_son li a,.s_son li a{ color:#004FA3; text-decoration:none; display:block; width:188px; cursor:pointer; height:30px; padding-left:10px; overflow:hidden; white-space:nowrap;text-overflow:ellipsis;}
.p_son li a:visited,.s_son li a:visited{color:#004FA3;}
.p_son li a:hover,.s_son li a:hover{ color:#C40000; text-decoration:underline; background:#ddd;}
.p_son li a.jt{ background:url(images/001_14.gif) no-repeat 180px 50%; }
.p_son li a.jt:hover{ background:url(images/001_14.gif) no-repeat 180px 50% #ddd;}
.p_son li.on{background:url(images/001_14.gif) no-repeat 180px 50% #ddd;}
.p_son li.on a{color:#C40000; text-decoration:underline;}
#p1,#s1{top:36px;}
#p2,#s2{top:68px;}
#p3,#s3{top:100px;}
#p4,#s4{top:132px;}
#s5{ top:164px;}
#w1{ top:131px;}
#w2{ top:162px;}
#w3{ top:196px;}
#w4{ top:228px;}
#w5{ top:260px;}
#w6{ top:292px;}
#w7{ top:324px;}
#p5{top:164px;}
#p6{ top:196px;}
.prdct .s_son{left:450px;}
</style>
</head>
<body>
<div class="link_box">
<div class="prdct">
<p class="bg01" id="t1"></p>
<p class="bg02" id="t2"></p>
<p class="bg02" id="t3" onmouseover="setturns(1)" onmouseout="setturnsout(1)"><a href="#">表面活性剂系列</a></p>
<p class="bg02" id="t4" onmouseover="setturns(2)" onmouseout="setturnsout(1)"><a href="#">螯合剂系列</a></p>
<p class="bg02" id="t5" onmouseover="setturns(3)" onmouseout="setturnsout(1)"><a href="#">增粘乳液系列</a></p>
<p class="bg02" id="t6" onmouseover="setturns(4)" onmouseout="setturnsout(1)"><a href="#">造纸化学品系列</a></p>
<p class="bg02" id="t7" onmouseover="setturns(5)" onmouseout="setturnsout(1)"><a href="#">印刷化学品系列</a></p>
<p class="bg02" id="t8" onmouseover="setturns(6)" onmouseout="setturnsout(1)"><a href="#">代理产品</a></p>
<p class="bg07" id="t9"></p>
<div class="p_son" id="p1" onmouseover="setturns(1)" onmouseout="setturnsout(1)">
<ul>
<li id="b1" onmouseover="setturns2(1)" onmouseout="setturnsout(1)"><a href="#" class="jt">功能性表面活性剂</a></li>
<li id="b2" onmouseover="setturns2(2)" onmouseout="setturnsout(1)"><a href="#" class="jt">阳离子表面活性剂</a></li>
<li id="b3" onmouseover="setturns2(3)" onmouseout="setturnsout(1)"><a href="#" class="jt">非离子表面活性剂</a></li>
<li id="b4" onmouseover="setturns2(4)" onmouseout="setturnsout(1)"><a href="#" class="jt">阴离子表面活性剂</a></li>
<li id="b5" onmouseover="setturns2(5)" onmouseout="setturnsout(1)"><a href="#" class="jt">两性表面活性剂</a></li>
</ul>
</div>
<div class="p_son" id="p2" onmouseover="setturns(2)" onmouseout="setturnsout(1)">
<ul>
<li><a href="#">DXP-1020胶粘剂专用消泡剂</a></li>
<li><a href="#">DXP-007消泡剂</a></li> 
<li><a href="#">DXP-007消泡剂</a></li> 
<li><a href="#">DXP-007消泡剂</a></li> 
</ul>
</div>
<div class="p_son" id="p3" onmouseover="setturns(3)" onmouseout="setturnsout(1)">
<ul>
<li><a href="#">施胶剂 </a></li>
<li><a href="#">氧漂稳定剂系列</a></li> 
<li><a href="#">蒸煮助剂</a></li> 
<li><a href="#">脱墨剂</a></li> 
<li><a href="#">消泡剂</a></li> 
<li><a href="#">施胶剂 </a></li>
</ul>
</div>
<div class="p_son" id="p4" onmouseover="setturns(4)" onmouseout="setturnsout(1)">
<ul>
<li id="z1" onmouseover="setturns4(1)" onmouseout="setturnsout(1)"><a href="#" class="jt">螯合剂 </a></li>
<li id="z2" onmouseover="setturns4(2)" onmouseout="setturnsout(1)"><a href="#" class="jt">乳化剂</a></li> 
<li id="z3" onmouseover="setturns4(3)" onmouseout="setturnsout(1)"><a href="#" class="jt">施胶剂</a></li> 
<li id="z4" onmouseover="setturns4(4)" onmouseout="setturnsout(1)"><a href="#" class="jt">脱墨剂</a></li> 
<li id="z5" onmouseover="setturns4(5)" onmouseout="setturnsout(1)"><a href="#" class="jt">显白剂</a></li> 
<li id="z6" onmouseover="setturns4(6)" onmouseout="setturnsout(1)"><a href="#" class="jt">消泡剂 </a></li>
<li id="z7" onmouseover="setturns4(7)" onmouseout="setturnsout(1)"><a href="#" class="jt">蒸煮助剂</a></li> 
</ul>
</div>
<div class="p_son" id="p5" onmouseover="setturns(5)" onmouseout="setturnsout(1)">
<ul>
<li><a href="#">施胶剂 </a></li>
<li><a href="#">氧漂稳定剂系列</a></li> 
<li><a href="#">蒸煮助剂</a></li> 
<li><a href="#">脱墨剂</a></li> 
<li><a href="#">消泡剂</a></li> 
<li><a href="#">施胶剂 </a></li>
<li><a href="#">氧漂稳定剂系列</a></li> 
</ul>
</div>
<div class="p_son" id="p6" onmouseover="setturns(6)" onmouseout="setturnsout(1)">
<ul>
<li><a href="#">罗迪亚造纸脱墨剂 </a></li>
<li><a href="#">DTPA二乙烯三胺五乙酸 </a></li> 
<li><a href="#">二乙烯三胺五乙酸五钠DTPA-Na5 </a></li> 
<li><a href="#">乙二胺四乙酸EDTA </a></li> 
<li><a href="#">乙二胺四乙酸四钠EDTA-Na4 </a></li> 
<li><a href="#">乙二胺四乙酸二钠盐 </a></li>
<li><a href="#">氧漂稳定剂系列</a></li> 
</ul>
</div>
<div class="p_son s_son" id="s1" onmouseover="setturns3(1)" onmouseout="setturnsout(1)">
<ul>
<li><a href="#">施胶剂 </a></li>
<li><a href="#">氧漂稳定剂系列</a></li> 
<li><a href="#">蒸煮助剂</a></li> 
<li><a href="#">脱墨剂</a></li> 
<li><a href="#">消泡剂</a></li> 
<li><a href="#">施胶剂 </a></li>
<li><a href="#">氧漂稳定剂系列</a></li> 
</ul>
</div>
<div class="p_son s_son" id="s2" onmouseover="setturns3(2)" onmouseout="setturnsout(1)">
<ul>
<li><a href="#">施胶剂 </a></li>
<li><a href="#">氧漂稳定剂系列</a></li> 
<li><a href="#">蒸煮助剂</a></li> 
<li><a href="#">脱墨剂</a></li> 
<li><a href="#">消泡剂</a></li> 
<li><a href="#">施胶剂 </a></li>
<li><a href="#">氧漂稳定剂系列</a></li> 
</ul>
</div>
<div class="p_son s_son" id="s3" onmouseover="setturns3(3)" onmouseout="setturnsout(1)">
<ul>
<li><a href="#">施胶剂 </a></li>
<li><a href="#">氧漂稳定剂系列氧列氧漂稳定剂系列</a></li> 
<li><a href="#">蒸煮助剂</a></li> 
<li><a href="#">脱墨剂</a></li> 
<li><a href="#">消泡剂</a></li> 
<li><a href="#">施胶剂 </a></li>
<li><a href="#">氧漂稳定剂系列</a></li> 
</ul>
</div>
<div class="p_son s_son" id="s4" onmouseover="setturns3(4)" onmouseout="setturnsout(1)">
<ul>
<li><a href="#">施胶剂 </a></li>
<li><a href="#">氧漂稳定剂系列</a></li> 
<li><a href="#">蒸煮助剂</a></li> 
<li><a href="#">脱墨剂</a></li> 
<li><a href="#">消泡剂</a></li> 
<li><a href="#">施胶剂 </a></li>
<li><a href="#">氧漂稳定剂系列</a></li> 
</ul>
</div>
<div class="p_son s_son" id="s5" onmouseover="setturns3(5)" onmouseout="setturnsout(1)">
<ul>
<li><a href="#">施胶剂 </a></li>
<li><a href="#">氧漂稳定剂系列</a></li> 
<li><a href="#">蒸煮助剂</a></li> 
<li><a href="#">脱墨剂</a></li> 
<li><a href="#">消泡剂</a></li> 
<li><a href="#">施胶剂 </a></li>
<li><a href="#">氧漂稳定剂系列</a></li> 
</ul>
</div>
<div class="p_son s_son" id="w1" onmouseover="setturns5(1)" onmouseout="setturnsout(1)">
<ul>
<li><a href="#">45345</a></li>
<li><a href="#">45345</a></li> 
<li><a href="#">453453</a></li> 
<li><a href="#">453</a></li>
</ul>
</div>
<div class="p_son s_son" id="w2" onmouseover="setturns5(2)" onmouseout="setturnsout(1)">
<ul>
<li><a href="#">45345</a></li>
<li><a href="#">45345</a></li> 
<li><a href="#">453453</a></li> 
<li><a href="#">453</a></li>
</ul>
</div>
<div class="p_son s_son" id="w3" onmouseover="setturns5(3)" onmouseout="setturnsout(1)">
<ul>
<li><a href="#">45345</a></li>
<li><a href="#">45345</a></li> 
<li><a href="#">453453</a></li> 
<li><a href="#">453</a></li>
</ul>
</div>
<div class="p_son s_son" id="w4" onmouseover="setturns5(4)" onmouseout="setturnsout(1)">
<ul>
<li><a href="#">45345</a></li>
<li><a href="#">45345</a></li> 
<li><a href="#">453453</a></li> 
<li><a href="#">453</a></li>
</ul>
</div>
<div class="p_son s_son" id="w5" onmouseover="setturns5(5)" onmouseout="setturnsout(1)">
<ul>
<li><a href="#">45345</a></li>
<li><a href="#">45345</a></li> 
<li><a href="#">453453</a></li> 
<li><a href="#">453</a></li>
</ul>
</div>
<div class="p_son s_son" id="w6" onmouseover="setturns5(6)" onmouseout="setturnsout(1)">
<ul>
<li><a href="#">45345</a></li>
<li><a href="#">45345</a></li> 
<li><a href="#">453453</a></li> 
<li><a href="#">453</a></li>
</ul>
</div>
<div class="p_son s_son" id="w7" onmouseover="setturns5(7)" onmouseout="setturnsout(1)">
<ul>
<li><a href="#">45345</a></li>
<li><a href="#">45345</a></li> 
<li><a href="#">453453</a></li> 
<li><a href="#">453</a></li>
</ul>
</div>
</div>
<div class="clr"></div>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

JS实现带有抽屉效果的产品类网站多级导航菜单代码

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
详解Vue 全局变量，局部变量
Apr 17 Javascript
JavaScript实现简单计算器功能
Dec 19 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
vue中使用router全局守卫实现页面拦截的示例
Oct 23 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
jQuery焦点图切换特效代码分享
Sep 15 #Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 #Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 #Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 #Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 #Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 #Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 #Javascript
闭幕词(9) 通知(159) 慰问信(53) 报告(147) 工作总结(1972) 计划(88) 导游词(322) 汇报材料(247) 实用文书(952) 开幕词(63)
You might like
用PHP发电子邮件
2006/10/09 PHP
php反射应用示例
2014/02/25 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
详解Grunt插件之LiveReload实现页面自动刷新（两种方案）
2015/07/31 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
jQuery实现跨域
2015/02/03 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
MVVM模式中ViewModel和View、Model有什么区别？
2015/06/19 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
python if not in 多条件判断代码
2016/09/21 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
简单了解python代码优化小技巧
2019/07/08 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
Python目录和文件处理总结详解
2019/09/02 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
python数据分析:关键字提取方式
2020/02/24 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
工作疏忽检讨书
2014/01/25 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
普通党员个人整改措施
2014/10/27 职场文书
杭白菊导游词
2015/02/10 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android