首页
所有分类
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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
详解vue-Resource（与后端数据交互）
Jan 16 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
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
职业生涯规划书(234) 演讲稿(869) 创业计划书(312) 求职信(1029) 心得体会(660) 岗位职责(1324) 证婚词(21) 思想汇报(404) 推荐信(292) 欢迎词(65)
You might like
php下清空字符串中的HTML标签的代码
2010/09/06 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
laravel框架路由分组，中间件，命名空间，子域名，路由前缀实例分析
2020/02/18 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
实例讲解JavaScript截取字符串
2018/11/30 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
Python里disconnect UDP套接字的方法
2015/04/23 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Python基础教程之异常详解
2019/01/10 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
教师竞聘上岗演讲稿
2014/09/03 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
2014年财务部工作总结
2014/11/11 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
六五普法学习心得体会
2016/01/21 职场文书
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL