JS+CSS实现TreeMenu二级树形菜单完整实例_javascript技巧
本文实例讲述了JS+CSS实现TreeMenu二级树形菜单。分享给大家供大家参考。具体如下：
这是一款二级树形菜单示例：CSS TreeMenu ，非常漂亮的树形菜单，用在网站右侧比较合适。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-css-treemenu-2l-menu-codes/
具体代码如下：
<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title>二级树形菜单示例：CSS TreeMenu</title>
<style type="text/css" media="all">
a,a:visited {color:#333;text-decoration:none;}
a:hover {color:#f60;}
body,td {font:13px "Geneva","宋体", "Arial", "Helvetica",sans-serif;}
ul,li {margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5,h6 {margin:0;padding:0;}
h1 {padding:5px;color:#900;font:16px bold "Geneva","宋体", "Arial", "Helvetica",sans-serif;}
h1 small {font-size:11px;font-weight:normal;color:#660;}
.TreeWrap {width:200px;}
.MenuBox .titBox a,
.MenuBox .titBox a:visited,
.MenuBox2 .titBox a,
.MenuBox2 .titBox a:visited {margin-left:10px;padding-left:40px;color:#003;font-size:12px;display:block;}
.MenuBox .titBox h3 a {background:url(images/ico_folder_open.gif) no-repeat 0 40%;}
.MenuBox .titBox h3.Fst a {background:url(images/ico_folder_open_fst.gif) no-repeat 0 40%;}
.MenuBox .titBox h3.Lst a {background:url(images/ico_folder_open_lst.gif) no-repeat 0 40%;}
.MenuBox2 .titBox h3 a {background:url(images/ico_folder.gif) no-repeat 0 40%;}
.MenuBox2 .titBox h3.Fst a {background:url(images/ico_folder_fst.gif) no-repeat 0 40%;}
.MenuBox2 .titBox h3.Lst a {line-height:250%;background:url(images/icon_exit.gif) no-repeat 0 0;}
.MenuBox2 .txtBox {display:none;}
.MenuBox .txtBox ul li {padding-left:65px;line-height:150%;}
.MenuBox .txtBox .num {color:#e00;}
.MenuBox .txtBox ul {background:url(images/line_y.gif) repeat-y 16px 0;}
.MenuBox .txtBox ul li {background:url(images/t.gif) no-repeat 28px 50%;}
.MenuBox .txtBox ul li.Lst {background:url(images/t_lst.gif) no-repeat 28px 50%;}
</style>
<script type="text/javascript">
<!--
function ExChgClsName(Obj,NameA,NameB){
var Obj=document.getElementById(Obj)?document.getElementById(Obj):Obj;
Obj.className=Obj.className==NameA?NameB:NameA;
}
function showMenu(iNo){
ExChgClsName("Menu_"+iNo,"MenuBox","MenuBox2");
}
-->
</script>
</head>
<body>
<h1 id="CSS-TreeMenu-small-By-枫岩-IECN-Net-small">CSS TreeMenu <small>By 枫岩@IECN.Net</small></h1>
<div class="TreeWrap">
<div class="MenuBox" id="Menu_0">
<div class="titBox"><h3 id="a-href-javascript-showMenu-同事-a"><a href="javascript:showMenu(0);">同事</a></h3></div>
<div class="txtBox">
<ul>
<li><a href="#">Dodo</a></li>
<li><a href="#">小春</a></li>
<li><a href="#">小林</a></li>
<li><a href="#">小龙</a></li>
<li class="Lst"><a href="#">枫岩</a></li>
</ul>
</div>
</div><!--MenuBox-->
<div class="MenuBox2" id="Menu_1">
<div class="titBox"><h3 id="a-href-javascript-showMenu-客户-a"><a href="javascript:showMenu(1);">客户</a></h3></div>
<div class="txtBox">
<ul>
<li><a href="#">Dodo</a></li>
<li><a href="#">小春</a></li>
<li><a href="#">小林</a></li>
<li><a href="#">小龙</a></li>
<li class="Lst"><a href="#">枫岩</a></li>
</ul>
</div>
</div><!--MenuBox-->
<div class="MenuBox2" id="Menu_2">
<div class="titBox"><h3 id="a-href-javascript-showMenu-朋友-a"><a href="javascript:showMenu(2);">朋友</a></h3></div>
<div class="txtBox">
<ul>
<li><a href="#">Dodo</a></li>
<li><a href="#">小春</a></li>
<li><a href="#">小林</a></li>
<li><a href="#">小龙</a></li>
<li class="Lst"><a href="#">枫岩</a></li>
</ul>
</div>
</div><!--MenuBox-->
<div class="MenuBox2" id="Menu_3">
<div class="titBox"><h3 id="a-href-javascript-showMenu-家人-a"><a href="javascript:showMenu(3);">家人</a></h3></div>
<div class="txtBox">
<ul>
<li><a href="#">Dodo</a></li>
<li><a href="#">小春</a></li>
<li><a href="#">小林</a></li>
<li><a href="#">小龙</a></li>
<li class="Lst"><a href="#">枫岩</a></li>
</ul>
</div>
</div><!--MenuBox-->
<div class="MenuBox2">
<div class="titBox"><h3 id="a-href-退出系统-a"><a href="#">退出系统</a></h3></div>
</div><!--MenuBox-->
</div>
</body>
</html>希望本文所述对大家的JavaScript程序设计有所帮助。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
h5怎么做进度条
Apr 06, 2025 pm 12:09 PM
使用 HTML5 或 CSS 创建进度条：创建进度条容器。设置进度条宽度。创建进度条内部元素。设置进度条内部元素宽度。使用 JavaScript、CSS 或进度条库显示进度。
H5页面制作适合哪些应用场景
Apr 05, 2025 pm 11:36 PM
H5（HTML5）适合应用于轻量级应用，如营销活动页面、产品展示页面和企业宣传微网站。它优势在于跨平台性和丰富的交互性，但局限性在于复杂的交互和动画、本地资源访问和离线功能。
h5项目怎么运行
Apr 06, 2025 pm 12:21 PM
运行 H5 项目需要以下步骤：安装 Web 服务器、Node.js、开发工具等必要工具。搭建开发环境，创建项目文件夹、初始化项目、编写代码。启动开发服务器，使用命令行运行命令。在浏览器中预览项目，输入开发服务器 URL。发布项目，优化代码、部署项目、设置 Web 服务器配置。
H5页面制作是前端开发吗
Apr 05, 2025 pm 11:42 PM
是的，H5页面制作是前端开发的重要实现方式，涉及HTML、CSS和JavaScript等核心技术。开发者通过巧妙结合这些技术，例如使用<canvas>标签绘制图形或使用JavaScript控制交互行为，构建出动态且功能强大的H5页面。
h5兼容问题怎么解决
Apr 06, 2025 pm 12:36 PM
解决 H5 兼容问题的方法包括：使用响应式设计，允许网页根据屏幕尺寸调整布局。采用跨浏览器测试工具，在发布前测试兼容性。使用 Polyfill，为旧浏览器提供对新 API 的支持。遵循 Web 标准，使用有效的代码和最佳实践。使用 CSS 预处理器，简化 CSS 代码并提高可读性。优化图像，减小网页大小并加快加载速度。启用 HTTPS，确保网站的安全性。
h5怎么制作点击图标
Apr 06, 2025 pm 12:15 PM
制作 H5 点击图标的步骤包括：在图像编辑软件中准备方形源图像。在 H5 编辑器中添加交互性，设置点击事件。创建覆盖整个图标的热点。设置点击事件的操作，如跳转页面或触发动画。导出 H5 文档为 HTML、CSS 和 JavaScript 文件。将导出的文件部署到网站或其他平台。
h5表格边框怎么设置
Apr 06, 2025 pm 12:18 PM
在 HTML 中，通过 CSS 设置 H5 表格边框：引入 CSS 样式表，使用 border 属性（包括 border-width、border-style 和 border-color 子属性）设置边框样式，并应用样式到表格元素。此外，还可以设置特定的边框样式，如 border-top、border-right、border-bottom 和 border-left。
H5页面制作的优势有哪些
Apr 05, 2025 pm 11:48 PM
H5 页面制作的优势包括：轻量级体验，加载速度快，提升用户留存率。跨平台兼容性，无需针对不同平台适配，提升开发效率。灵活性和动态更新，无需审核，便于内容修改和更新。成本效益，开发成本比原生 App 低。
