全部

简单div+css+js实现网页左侧导航三级折叠竖向下拉导航菜单

阅读 次  ·  发布日期 2018-07-12 19:20  · 
<!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>
<title>中国站长天空-网页特效-导航菜单-三级折叠竖向下拉导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
*,body,ul,li,h1,h2{margin:0;padding:0;list-style:none;}
body{font:12px "宋体";padding-top:20px;}
#menu{width:200px;margin:auto;}
#menu h1{cursor:pointer;color:#FFF;font-size:12px;padding:5px 0 3px 10px;border:#C60 1px solid;margin-top:1px;background-color:#F93;}
#menu h2{cursor:pointer;color:#777;font-size:12px;padding:5px 0 3px 10px;border:#E7E7E7 1px solid;border-top-color:#FFF;background-color:#F4F4F4;}
#menu ul{padding-left:15px;height:100px;border:#E7E7E7 1px solid;border-top:none;overflow:auto;}
#menu ul li{padding:5px 0 3px 10px;}
.no{display:none;}
</style>
<script language="JavaScript">
<!--
function ShowMenu(obj,noid){
var block = document.getElementById(noid);
var n = noid.substr(noid.length-1);
if(noid.length==4){
  var ul = document.getElementById(noid.substring(0,3)).getElementsByTagName("ul");
  var h2 = document.getElementById(noid.substring(0,3)).getElementsByTagName("h2");
  for(var i=0; i<h2.length;i++){
   h2[i].innerHTML = h2[i].innerHTML.replace("+","-");
   h2[i].style.color = "";
  }
  obj.style.color = "#FF0000";
  for(var i=0; i<ul.length; i++){if(i!=n){ul[i].className = "no";}}
}else{
  var span = document.getElementById("menu").getElementsByTagName("span");
  var h1 = document.getElementById("menu").getElementsByTagName("h1");
  for(var i=0; i<h1.length;i++){
   h1[i].innerHTML = h1[i].innerHTML.replace("+","-");
   h1[i].style.color = "";
  }
  obj.style.color = "#0000FF";
  for(var i=0; i<span.length; i++){if(i!=n){span[i].className = "no";}}
}
if(block.className == "no"){
  block.className = "";
  obj.innerHTML = obj.innerHTML.replace("-","+");
}else{
  block.className = "no";
  obj.style.color = "";
}
}
//-->
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="menu">
<h1 onClick="javascript:ShowMenu(this,'NO0')"> - 一级菜单A</h1>
<span id="NO0" class="no">
  <h2 onClick="javascript:ShowMenu(this,'NO00')"> - 一级菜单A_1</h2>
  <ul id="NO00" class="no">
   <li>一级菜单A_0</li>
   <li>一级菜单A_1</li>
   <li>一级菜单A_2</li>
   <li>一级菜单A_3</li>
   <li>一级菜单A_4</li>
   <li>一级菜单A_5</li>
   <li>一级菜单A_6</li>
   <li>一级菜单A_7</li>
   <li>一级菜单A_8</li>
   <li>一级菜单A_9</li>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,'NO01')"> - 一级菜单A_2</h2>
  <ul id="NO01" class="no">
   <li>一级菜单A_0</li>
   <li>一级菜单A_1</li>
   <li>一级菜单A_2</li>
   <li>一级菜单A_3</li>
   <li>一级菜单A_4</li>
   <li>一级菜单A_5</li>
   <li>一级菜单A_6</li>
   <li>一级菜单A_7</li>
   <li>一级菜单A_8</li>
   <li>一级菜单A_9</li>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,'NO02')"> - 一级菜单A_3</h2>
  <ul id="NO02" class="no">
   <li>一级菜单A_0</li>
   <li>一级菜单A_1</li>
   <li>一级菜单A_2</li>
   <li>一级菜单A_3</li>
   <li>一级菜单A_4</li>
   <li>一级菜单A_5</li>
   <li>一级菜单A_6</li>
   <li>一级菜单A_7</li>
   <li>一级菜单A_8</li>
   <li>一级菜单A_9</li>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,'NO03')"> - 一级菜单A_4</h2>
  <ul id="NO03" class="no">
   <li>一级菜单A_0</li>
   <li>一级菜单A_1</li>
   <li>一级菜单A_2</li>
   <li>一级菜单A_3</li>
   <li>一级菜单A_4</li>
   <li>一级菜单A_5</li>
   <li>一级菜单A_6</li>
   <li>一级菜单A_7</li>
   <li>一级菜单A_8</li>
   <li>一级菜单A_9</li>
  </ul>
</span>
<h1 onClick="javascript:ShowMenu(this,'NO1')"> - 二级菜单B</h1>
<span id="NO1" class="no">
  <h2 onClick="javascript:ShowMenu(this,'NO10')"> - 二级菜单B_1</h2>
  <ul id="NO10" class="no">
   <li>二级菜单B_0</li>
   <li>二级菜单B_1</li>
   <li>二级菜单B_2</li>
   <li>二级菜单B_3</li>
   <li>二级菜单B_4</li>
   <li>二级菜单B_5</li>
   <li>二级菜单B_6</li>
   <li>二级菜单B_7</li>
   <li>二级菜单B_8</li>
   <li>二级菜单B_9</li>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,'NO11')"> - 二级菜单B_2</h2>
  <ul id="NO11" class="no">
   <li>二级菜单B_0</li>
   <li>二级菜单B_1</li>
   <li>二级菜单B_2</li>
   <li>二级菜单B_3</li>
   <li>二级菜单B_4</li>
   <li>二级菜单B_5</li>
   <li>二级菜单B_6</li>
   <li>二级菜单B_7</li>
   <li>二级菜单B_8</li>
   <li>二级菜单B_9</li>
  </ul>
</span>
<h1 onClick="javascript:ShowMenu(this,'NO2')"> - 三级菜单C</h1>
<span id="NO2" class="no">
  <h2 onClick="javascript:ShowMenu(this,'NO20')"> - 三级菜单C_1</h2>
  <ul id="NO20" class="no">
   <li>三级菜单C_0</li>
   <li>三级菜单C_1</li>
   <li>三级菜单C_2</li>
   <li>三级菜单C_3</li>
   <li>三级菜单C_4</li>
   <li>三级菜单C_5</li>
   <li>三级菜单C_6</li>
   <li>三级菜单C_7</li>
   <li>三级菜单C_8</li>
   <li>三级菜单C_9</li>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,'NO21')"> - 三级菜单C_2</h2>
  <ul id="NO21" class="no">
   <li>三级菜单C_0</li>
   <li>三级菜单C_1</li>
   <li>三级菜单C_2</li>
   <li>三级菜单C_3</li>
   <li>三级菜单C_4</li>
   <li>三级菜单C_5</li>
   <li>三级菜单C_6</li>
   <li>三级菜单C_7</li>
   <li>三级菜单C_8</li>
   <li>三级菜单C_9</li>
  </ul>
</span>
<h1 onClick="javascript:ShowMenu(this,'NO3')"> - 四级菜单D</h1>
<span id="NO3" class="no">
  <h2 onClick="javascript:ShowMenu(this,'NO30')"> - 四级菜单D_1</h2>
  <ul id="NO30" class="no">
   <li>四级菜单D_0</li>
   <li>四级菜单D_1</li>
   <li>四级菜单D_2</li>
   <li>四级菜单D_3</li>
   <li>四级菜单D_4</li>
   <li>四级菜单D_5</li>
   <li>四级菜单D_6</li>
   <li>四级菜单D_7</li>
   <li>四级菜单D_8</li>
   <li>四级菜单D_9</li>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,'NO31')"> - 四级菜单D_2</h2>
  <ul id="NO31" class="no">
   <li>四级菜单D_0</li>
   <li>四级菜单D_1</li>
   <li>四级菜单D_2</li>
   <li>四级菜单D_3</li>
   <li>四级菜单D_4</li>
   <li>四级菜单D_5</li>
   <li>四级菜单D_6</li>
   <li>四级菜单D_7</li>
   <li>四级菜单D_8</li>
   <li>四级菜单D_9</li>
  </ul>
</span>
</div>
</body>
</html>

本站关键词：信宏达网络,信宏达科技,北京网站建设公司,北京网站建设,北京网站设计,北京企业网站建设,朝阳网站建设,海淀设计制作,西城网页设计,网站制作公司,北京高端网站建设,企业网站建设,北京建站,营销型网站建设,自适应网站制作,html5网站制作,上地做网站公司,西二旗网站建设,中关村网站建设,信宏达网络科技有限公司,北京信宏达网络科技有限公司