首页
所有分类
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 相关文章推荐
javascript编程起步（第四课）
Feb 27 Javascript
js 动态选中下拉框
Nov 26 Javascript
js 数值项目的格式化函数代码
May 14 Javascript
使用jquery实现简单的ajax
Jul 08 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
JavaScript内置对象之Array的使用小结
May 12 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 Javascript
vue如何在data中引入图片的正确路径
Jun 05 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
R9700(1) DE1107(3) 239军机(1) YAESU(1) frg-100(1) DE1105(1) 根德5570(1) WR-800F(1) SONY600GR(1) DE1103(2)
You might like
php.ini中的request_order推荐设置
2015/05/10 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
angularJS中$apply()方法详解
2015/01/07 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
Python 正则表达式(转义问题)
2014/12/15 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
Python编程之string相关操作实例详解
2017/07/22 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
python实现图书管理系统
2018/03/12 Python
python版飞机大战代码分享
2018/11/20 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
德国购买健身器材：AsVIVA
2017/08/09 全球购物
Casadei卡萨蒂官网：意大利奢侈鞋履品牌
2017/10/28 全球购物
奥地利体育网上商店：Gigasport
2019/10/09 全球购物
大专自我鉴定范文
2013/10/01 职场文书
大学生如何写自荐信
2014/01/08 职场文书
班级活动策划书
2014/02/06 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
2014年内勤工作总结
2014/11/24 职场文书
档案管理员岗位职责
2015/02/12 职场文书
北京青年观后感
2015/06/15 职场文书
选对餐饮营销策略，营业额才会上涨
2019/08/27 职场文书