javascript css实现三级目录(简单的)

更新时间：2007年12月16日 21:47:30 投稿：mdxy-dxy

本篇文章主要介绍了javascript css实现三级目录(简单的)，这是一款不错的CSS树形菜单，树状列表，当然不全是CSS实现，部分功能还使用了JavaScript代码进行配合，感兴趣的小伙伴们可以参考一下

是在原先的二级目录改的,先给出演示

这里是css

/*bg macji(http://www.macji.com)*/ 
ul,li,p{margin:0; padding:0; list-style:none; font-size:12px} 
.m_menu_title{height:24px;line-height:24px;text-align:center;margin:0 1px} 
.m_menu_content{border-top:solid 1px #ccc;padding:8px 2px} 

/*一级*/ 
.m_menu_content p{height:22px;line-height:22px} 
.m_menu_content p a{ 
 color:#666633; 
 font-weight:bold; 
 text-decoration:none; 
 background:url(http://www.macji.com/blog/img/icon.gif) no-repeat 8px 4px; 
 padding:0 0 0 30px; 
 display:block 
} 
.m_menu_content p a:hover{color:#fe8005;font-weight:bold;text-decoration:none} 
.m_menu_content p a.on{background-position:8px -18px} 

/*二级*/ 
.menu2{} 
.menu2 li{line-height:22px} 
.menu2 a{color:#000; 
 text-decoration:none; 
 display:block; 
 padding:0 0 0 40px; 
 background:url(http://www.macji.com/blog/img/icon.gif) no-repeat 18px 4px 
} 
.menu2 a.on{background-position:18px -18px} 

/*三级*/ 
.menu2 ul{} 
.menu2 ul a{ 
 background-position:30px -39px; 
 padding:0 0 0 50px; 
 color:#666633; 
 text-decoration:underline 
} 
.menu2 ul a:hover{background-color:#f5f5f5; color:#f60}

目录是循环的,我给写死了.下面给出js

/* 
这里是直接写死了,根据传入的id编号,判断是否显示,不显示就显示 
id编号是有规律的,可用服务器端语言循环出目录 
*/ 
function setMenuList(num){ 
 var p = document.getElementById('p' + num); 
 var ul = document.getElementById('ul' + num); 
 if(ul.style.display == ‘none'){ 
 ul.style.display = ”; 
 p.className = “on”; 
 }else{ 
 ul.style.display = ‘none'; 
 p.className = “”; 
 } 
}

演示查看

<!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=utf-8" /> 
<title>简易三级目录演示</title> 
<style> 
<!-- 
/*bg maiji(http://www.macji.com)*/ 
ul,li,p{margin:0; padding:0; list-style:none; font-size:12px} 
.m_menu_title{height:24px;line-height:24px;text-align:center;margin:0 1px} 
.m_menu_content{border-top:solid 1px #ccc;padding:8px 2px} 
/*一级*/ 
.m_menu_content p{height:22px;line-height:22px} 
.m_menu_content p a{color:#666633;font-weight:bold;text-decoration:none;background:url(http://www.macji.com/blog/img/icon.gif) no-repeat 8px 4px;padding:0 0 0 30px;display:block} 
.m_menu_content p a:hover{color:#fe8005;font-weight:bold;text-decoration:none} 
.m_menu_content p a.on{background-position:8px -18px} 
/*二级*/ 
.menu2{} 
.menu2 li{line-height:22px} 
.menu2 a{color:#000; text-decoration:none; display:block; padding:0 0 0 40px; background:url(http://www.macji.com/blog/img/icon.gif) no-repeat 18px 4px;} 
.menu2 a.on{background-position:18px -18px} 
/*三级*/ 
.menu2 ul{} 
.menu2 ul a{background-position:30px -39px; padding:0 0 0 50px; color:#666633; text-decoration:underline} 
.menu2 ul a:hover{background-color:#f5f5f5; color:#f60} 

</style> 
</head> 

<body> 
<div style="width:200px; border:solid 1px #ccc"> 
  <div class="m_menu_title">管理中心</div> 
 <div class="m_menu_content"> 
  <p><a href="#his" onclick="setMenuList(1)" id="p1">一级目录(老大)</a></p> 
  
   <ul id="ul1" class="menu2" style="display:none"> 
  <li> 
   <a href="#his" onclick="setMenuList(11)" id="p11">二级目录(老二)</a> 
   <ul id="ul11" style="display:none"> 
   <li><a href="#this">档案管理</a></li> 
   <li><a href="#this">日志管理</a></li> 
   <li><a href="#this">相册管理</a></li> 
   <li><a href="#this">视频管理</a></li> 
   <li><a href="#this">音乐管理</a></li> 
   <li><a href="#this">房间管理</a></li> 
   <li><a href="#this">物品管理</a></li> 
   </ul> 
  </li> 
   
  <li> 
   <a href="#his" onclick="setMenuList(12)" id="p12">二级目录(老二)</a> 
   <ul id="ul12" style="display:none"> 
   <li><a href="#this">档案管理</a></li> 
   <li><a href="#this">日志管理</a></li> 
   <li><a href="#this">相册管理</a></li> 
   <li><a href="#this">视频管理</a></li> 
   <li><a href="#this">音乐管理</a></li> 
   <li><a href="#this">房间管理</a></li> 
   <li><a href="#this">物品管理</a></li> 
   </ul> 
  </li> 
   
  <li> 
   <a href="#his" onclick="setMenuList(13)" id="p13">二级目录(老二)</a> 
   <ul id="ul13" style="display:none"> 
   <li><a href="#this">档案管理</a></li> 
   <li><a href="#this">日志管理</a></li> 
   <li><a href="#this">相册管理</a></li> 
   <li><a href="#this">视频管理</a></li> 
   <li><a href="#this">音乐管理</a></li> 
   <li><a href="#this">房间管理</a></li> 
   <li><a href="#this">物品管理</a></li> 
   </ul> 
  </li> 
  </ul>   
  
  <p><a href="#his" onclick="setMenuList(2)" id="p2">一级目录2(老大)</a></p> 
  
   <ul id="ul2" class="menu2" style="display:none"> 
  <li> 
   <a href="#his" onclick="setMenuList(21)" id="p21">二级目录(老二)</a> 
   <ul id="ul21" style="display:none"> 
   <li><a href="#this">档案管理</a></li> 
   <li><a href="#this">日志管理</a></li> 
   <li><a href="#this">相册管理</a></li> 
   <li><a href="#this">视频管理</a></li> 
   <li><a href="#this">音乐管理</a></li> 
   <li><a href="#this">房间管理</a></li> 
   <li><a href="#this">物品管理</a></li> 
   </ul> 
  </li> 
   
  <li> 
   <a href="#his" onclick="setMenuList(22)" id="p22">二级目录(老二)</a> 
   <ul id="ul22" style="display:none"> 
   <li><a href="#this">档案管理</a></li> 
   <li><a href="#this">日志管理</a></li> 
   <li><a href="#this">相册管理</a></li> 
   <li><a href="#this">视频管理</a></li> 
   <li><a href="#this">音乐管理</a></li> 
   <li><a href="#this">房间管理</a></li> 
   <li><a href="#this">物品管理</a></li> 
   </ul> 
  </li> 
   
  <li> 
   <a href="#his" onclick="setMenuList(23)" id="p23">二级目录(老二)</a> 
   <ul id="ul23" style="display:none"> 
   <li><a href="#this">档案管理</a></li> 
   <li><a href="#this">日志管理</a></li> 
   <li><a href="#this">相册管理</a></li> 
   <li><a href="#this">视频管理</a></li> 
   <li><a href="#this">音乐管理</a></li> 
   <li><a href="#this">房间管理</a></li> 
   <li><a href="#this">物品管理</a></li> 
   </ul> 
  </li> 
  </ul> 
  
  <p><a href="#his" onclick="setMenuList(3)" id="p3">一级目录2(老大)</a></p> 
  
   <ul id="ul3" class="menu2" style="display:none"> 
  <li> 
   <a href="#his" onclick="setMenuList(31)" id="p31">二级目录(老二)</a> 
   <ul id="ul31" style="display:none"> 
   <li><a href="#this">档案管理</a></li> 
   <li><a href="#this">日志管理</a></li> 
   <li><a href="#this">相册管理</a></li> 
   <li><a href="#this">视频管理</a></li> 
   <li><a href="#this">音乐管理</a></li> 
   <li><a href="#this">房间管理</a></li> 
   <li><a href="#this">物品管理</a></li> 
   </ul> 
  </li> 
   
  <li> 
   <a href="#his" onclick="setMenuList(32)" id="p32">二级目录(老二)</a> 
   <ul id="ul32" style="display:none"> 
   <li><a href="#this">档案管理</a></li> 
   <li><a href="#this">日志管理</a></li> 
   <li><a href="#this">相册管理</a></li> 
   <li><a href="#this">视频管理</a></li> 
   <li><a href="#this">音乐管理</a></li> 
   <li><a href="#this">房间管理</a></li> 
   <li><a href="#this">物品管理</a></li> 
   </ul> 
  </li> 
   
  <li> 
   <a href="#his" onclick="setMenuList(33)" id="p33">二级目录(老二)</a> 
   <ul id="ul33" style="display:none"> 
   <li><a href="#this">档案管理</a></li> 
   <li><a href="#this">日志管理</a></li> 
   <li><a href="#this">相册管理</a></li> 
   <li><a href="#this">视频管理</a></li> 
   <li><a href="#this">音乐管理</a></li> 
   <li><a href="#this">房间管理</a></li> 
   <li><a href="#this">物品管理</a></li> 
   </ul> 
  </li> 
  </ul> 
     
  <p><a href="#his" class="on">退出</a></p> 
 </div> 
</div> 
 <script> 
 /* 
 
 这里是直接写死了,根据传入的id编号,判断是否显示,不显示就显示 
 id编号是有规律的,可用服务器端语言循环出目录 
 
 */ 
 function setMenuList(num){ 
  var p = document.getElementById('p' + num); 
 var ul = document.getElementById('ul' + num); 
 if(ul.style.display == 'none'){ 
  ul.style.display = ''; 
  p.className = "on"; 
 }else{ 
  ul.style.display = 'none'; 
  p.className = ""; 
 } 
 } 
 > 
 </script> 
</body> 
</html> 

  [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Highlight patterns within strings
Highlight patterns within strings...
2007-04-04
asp 获取url函数小结
asp 获取url函数小结，需要的朋友可以参考下。
2009-11-11
用ASP写组件
用ASP写组件...
2006-08-08
asp MD5加密方式使用建议
根据MD5算法的特点，我们可以把MD5加密过程看作是一个函数调用过程，建议必须做如下方式修改,这样可以保证一定程度上你的网站用户和数据安全
2009-05-05
asp下去除数组中重复项的方法
这篇文章主要为大家介绍了asp中去除数组中重复项的方法，需要的朋友可以参考下
2007-08-08
asp中最新新闻显示new图片的实现代码
很多朋友想在最新新闻显示new图片，以便访客快速找到新更新的内容，原理就是通过判断日期
2012-03-03
ASP项目中的公共翻页模块
ASP项目中的公共翻页模块...
2006-12-12
判断dll文件是否已经注册的ASP函数代码
有时候需要判断服务器是否按照了dll文件，那么就可以参考下面的代码进行判断。
2011-09-09
ASP XML制作菜单管理程序
利用asp+xml实现代码管理，实际就是利用asp操作xml
2008-12-12
天枫常用的ASP函数封装如下
对于用asp开发网站的朋友可以借鉴下他的asp函数，方便学习与提高开发效率
2008-06-06