首页
所有分类
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 相关文章推荐
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
vue 动态修改a标签的样式的方法
Jan 18 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 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
iOS(1) compose(3) iPhone(1) DNA(2) Athens(1) 陨石(1) RNA(2) moviepy(1) iOS16(1) iOS15(1)
You might like
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
php实现购物车功能（上）
2020/07/23 PHP
php mysql 封装类实例代码
2016/09/18 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
javascript常用方法总结
2015/05/14 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
react-router中的属性详解
2017/06/01 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
js实现蒙版效果
2020/01/11 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
python 快速排序代码
2009/11/23 Python
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
Python中Selenium库使用教程详解
2020/07/23 Python
Farfetch阿联酋：奢侈品牌时尚购物平台
2019/07/26 全球购物
惠普新加坡官方商店：HP Singapore
2020/04/17 全球购物
运动会入场解说词300字
2014/01/25 职场文书
班主任新年寄语
2014/04/04 职场文书
JUnit5常用注解的使用
2021/07/02 Java/Android
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis