js三级分类菜单导航

  原理很简单:点击标题的时候把子目录的id传给js函数,然后js函数判断是打开还是关上子目录。

Code:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">  
  3.   
  4. <head>  
  5. <title>三级导航菜单,三级竖向展开/收缩导航菜单-网页特效观止-网页特效代码|JsCode.CN|</title>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
  7. <style>  
  8. *{ margin:0; padding:0;font-size:12px;}  
  9. ul{ list-style:none;}  
  10. .ps{margin-left:10px;display:none;}  
  11. .f{cursor:pointer;line-height:20px; padding-left:20px; height:20px;}  
  12. .b{cursor:pointer;line-height:20px; padding-left:20px; height:20px;}  
  13. .menu{padding:8px 0;}  
  14. </style>  
  15. </head>  
  16. <body bgcolor="#F6F6F6">  
  17. <div class="menu">  
  18.   
  19.   
  20. <div class="f" id="sa1" onclick="w('a1')">香车美女</div>  
  21. <div class="ps" id="a1" style="display:none">  
  22.    <div id="ssa1b1" class="f" onclick="w('sa1b1')">2008北京车展车模(6164)</div>  
  23.    <ul class="ps" id="sa1b1">  
  24.     <li class="b">其他车模(1384)</li>  
  25.     <li class="b">捷豹展台车模(199)</li>  
  26.     <li class="b">力帆汽车展台车模(49)</li>  
  27.    </ul>  
  28.      
  29.      
  30.    <div id="ssa1b2" class="f" onclick="w('sa1b2')">2008北京车展花絮(782)</div>  
  31.    <ul class="ps" id="sa1b2">  
  32.     <li class="b">2008款LRX概念车发布现场(11)</li>  
  33.     <li class="b">PIVO 2 发布现场(7)</li>  
  34.     <li class="b">大众展台美丽风光(24)</li>  
  35.    </ul>  
  36. </div>  
  37.   
  38.   
  39.   
  40.   
  41. <div class="f" id="sa2" onclick="w('a2')">香车美女2</div>  
  42. <div class="ps" id="a2" style="display:none">        
  43.    <div id="ssa2b2" class="f" onclick="w('sa2b2')" >2008北京车展车模(6164)</div>  
  44.    <ul class="ps" id="sa2b2"style="background-repeat: no-repeat;">  
  45.     <li class="b">其他车模(1384)</li>  
  46.     <li class="b">捷豹展台车模(199)</li>  
  47.     <li class="b">力帆汽车展台车模(49)</li>  
  48.    </ul>  
  49.    <div id="sfmn2b3" class="f" onclick="w('fmn2b2')">2008北京车展花絮(782)</div>  
  50.    <ul class="ps" id="fmn2b3">  
  51.     <li class="b">2008款LRX概念车发布现场(11)</li>  
  52.     <li class="b">PIVO 2 发布现场(7)</li>  
  53.     <li class="b">大众展台美丽风光(24)</li>  
  54.    </ul>  
  55. </div>  
  56. </div>  
  57.   
  58. <script language="javascript" type="text/javascript">  
  59. function w(vd)  
  60. {  
  61. var ob=document.getElementById(vd);  
  62. if(ob.style.display=="block" || ob.style.display=="")  
  63. {  
  64.      ob.style.display="none";  
  65. }  
  66. else  
  67. {  
  68.     ob.style.display="block";  
  69. }  
  70. }  
  71.   
  72. </script>  
  73. </body>  
  74.   
  75. </html>  

懒人图库网上有不少源码  http://www.lanrentuku.com/

你可能感兴趣的:(js三级分类菜单导航)