JS+css树形菜单效果展示资源-CSDN文库

共1个文件

html：1个

树形菜单

效果展示

web

4星 · 超过85%的资源需积分: 9 122 浏览量 2009-07-19 11:02:18 上传评论收藏 2KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

JS+css树形菜单效果展示.rar （1个子文件）

css树形菜单.html 10KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> body { margin: 0px; padding: 20px; font: 12px tahoma,宋体,sans-serif; } /* 无限子级菜单开始 */ * { margin: 0px; padding: 0px; } /* 外框 */ #TreeMenu { Width: 160px; word-wrap: break-word; background-color: #FFFFCC; } /* 每一个ul */ #TreeMenu ul { margin: 0px 0px 0px 10px; list-style: none; } /* 第一个ul */ ul#TreeTop { margin: 0px; } /* 每一个li */ #TreeMenu ul li { width: 100%; } /* 每一个li里面的a 开始 */ #TreeMenu ul li a { padding: 0px 0px 0px 30px; font-size: 12px; font-weight: normal; text-decoration: none; } #TreeMenu ul li a:link, #TreeMenu ul li a:visited { color: #009933; } #TreeMenu ul li a:hover { color: #FF0000; } #TreeMenu ul li a:active { color: #009933; } /* 每一个li里面的a 结束 */ /* 关闭的节点开始 */ li.TreeClosed { background: url(<a href="http://www.cnlei.org/mycode/CNLTreeMenu/Ver1.0.2/css/skin3/closed.gif" target="_blank">http://www.cnlei.org/mycode/CNLTreeMenu/Ver1.0.2/css/skin3/closed.gif</a>) no-repeat 0px 0px; } li.TreeClosed ul { display: none; } /* 关闭的节点结束 */ /* 打开的节点 */ li.TreeOpened { background: url(<a href="http://www.cnlei.org/mycode/CNLTreeMenu/Ver1.0.2/css/skin3/opened.gif" target="_blank">http://www.cnlei.org/mycode/CNLTreeMenu/Ver1.0.2/css/skin3/opened.gif</a>) no-repeat 0px 0px; } /* 最终节点开始 */ li.TreeChild { background:url(<a href="http://www.cnlei.org/mycode/CNLTreeMenu/Ver1.0.2/css/skin3/child.gif" target="_blank">http://www.cnlei.org/mycode/CNLTreeMenu/Ver1.0.2/css/skin3/child.gif</a>) no-repeat 0px 0px; } /* 调整最终节点的位置 */ #TreeMenu ul li.TreeChild { margin: 0px 0px 0px 4px; } /* 调整最终节点中a的位置 */ #TreeMenu ul li.TreeChild a { padding: 0px 0px 0px 15px; } /* 最终节点结束 */ /* 全部展开折叠开始 */ #SwitchAllNodes { padding: 10px 0px 10px 15px; } a#AllOpenID, a#AllCloseID { color: #009933; text-decoration: none; } a#AllCloseID { display: none; } a#AllOpenID:hover, a#AllCloseID:hover { color: #FF0000; } /* 全部展开折叠结束 */ /* 无限子级菜单结束 */ </style> <title>无标题文档</title> </head> <body> <div id="TreeMenu"> <h4>Tree Menu</h4> <div id="SwitchAllNodes"> <a id="AllOpenID" href="#" onclick="javascript:funSwitchAllNodes('Open','AllOpenID','AllCloseID');">全部展开</a> <a id="AllCloseID" href="#" onclick="javascript:funSwitchAllNodes('Close','AllOpenID','AllCloseID');">全部折叠</a> </div> <ul id="TreeTop">  <li class="TreeOpened"><a href="#">IECN.Net</a> <ul>  <li><a href="#">技术区</a> <ul>  <li><a href="#">网页技术</a> <ul>  <li class="TreeChild"><a href="#">JavaScript</a></li> <li class="TreeChild"><a href="#">HTML/XHTML/CSS</a></li> <li class="TreeChild"><a href="#">Ajax</a></li> <li class="TreeChild"><a href="#">网页制作工具</a></li> <li class="TreeChild"><a href="#">设计/图形</a></li> <li class="TreeChild"><a href="#">Flash/多媒体</a></li> <li class="TreeChild"><a href="#">VML/Web3D</a></li> </ul> </li>   <li><a href="#">Web编程</a> <ul>  <li class="TreeChild"><a href="#">Java</a></li> <li class="TreeChild"><a href="#">.Net</a></li> <li class="TreeChild"><a href="#">ASP/VBScript</a></li> <li class="TreeChild"><a href="#">PHP</a></li> <li class="TreeChild"><a href="#">Perl/Python</a></li> <li class="TreeChild"><a href="#">Web综合/开源</a></li> </ul> </li>   <li><a href="#">数据库</a> <ul>  <li class="TreeChild"><a href="#">Access/SQLServer</a></li> <li class="TreeChild"><a href="#">MySQL/PostgreSQL</a></li> <li class="TreeChild"><a href="#">Oracle/DB2/Sybase</a></li> </ul> </li>   <li><a href="#">服务器</a> <ul>  <li class="TreeChild"><a href="#">Windows/IIS</a></li> <li class="TreeChild"><a href="#">Unix/Linux/Apache</a></li> <li class="TreeChild"><a href="#">应用服务器</a></li> </ul> </li>  </ul> </li>   <li><a href="#">二级目录</a> <ul>  <li><a href="#">三级目录</a> <ul>  <li><a href="#">四级目录</a> <ul>  <li><a href="#">五级目录</a> <ul>  <li><a href="#">......</a> <ul>  <li><a href="#">第n级目录</a> <ul>  <li class="TreeChild"><a href="#">最终节点1</a></li> <li class="TreeChild"><a href="#">最终节点2</a></li> <li class="TreeChild"><a href="#">最终节点3</a></li> </ul> </li>  </ul> </li>  </ul> </li>  </ul> </li>  </ul> </li>  </ul> </li>   <li><a href="#">第二个二级目录</a> <ul>  <li><a href="#">第二个三级目录</a> <ul>  <li><a href="#">第二个四级目录</a> <ul>  <li><a href="#">第二个五级目录</a> <ul>  <li><a href="#">......</a> <ul>  <li><a href="#">第二个第n级目录</a> <ul>  <li class="TreeChild"><a href="#">最终节点1</a></li> <li class="TreeChild"><a href="#">最终节点2</a></li> <li class="TreeChild"><a href="#">最终节点3</a></li> </ul> </li>  </ul> </li>  </ul> </li>  </ul> </li>  </ul> </li>  </ul> </li>  </ul> </li>  </ul> </div> <script type="text/javascript"> <!-- /* 结构是<ul><li><div class="TreeTMP"><a>内容</a></div></li></ul> <TreeTMP>被点击后，改变这个<TreeTMP>父级的<li>的class名称 */ function funSwitch(praOBJ) { if (praOBJ.parentNode.className == "TreeOpened") praOBJ.parentNode.className = "TreeClosed

评论收藏

内容反馈