JS+CSS实现TreeMenu二级树形菜单完整实例


Posted in Javascript onSeptember 18, 2015

本文实例讲述了JS+CSS实现TreeMenu二级树形菜单。分享给大家供大家参考。具体如下:

这是一款二级树形菜单示例:CSS TreeMenu ,非常漂亮的树形菜单,用在网站右侧比较合适。

运行效果截图如下:

JS+CSS实现TreeMenu二级树形菜单完整实例

在线演示地址如下:

具体代码如下:

<!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>CSS TreeMenu <small>By 枫岩@IECN.Net</small></h1>
<div class="TreeWrap">
<div class="MenuBox" id="Menu_0">
<div class="titBox"><h3 class="Fst"><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><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><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><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 class="Lst"><a href="#">退出系统</a></h3></div>
</div><!--MenuBox-->
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
使用JQuery进行跨域请求
Jan 25 Javascript
Javascript面向对象之四 继承
Feb 08 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
基于JavaScript获取url参数2种方法
Apr 17 Javascript
原生js实现滑块区间组件
Jan 20 Javascript
js判断两个数组相等的5种方法
May 06 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 #Javascript
11种ASP连接数据库的方法
Sep 18 #Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 #Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 #Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 #Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 #Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 #Javascript
You might like
PHP数据库开发知多少
2006/10/09 PHP
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
php新建文件的方法实例
2019/09/26 PHP
文本链接逐个出现的js脚本
2007/12/12 Javascript
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
Python易忽视知识点小结
2015/05/25 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
python简易远程控制单线程版
2018/06/20 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
python使用PyQt5的简单方法
2019/02/27 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
简历上的自我评价怎么写
2014/01/28 职场文书
统计系教授推荐信
2014/02/28 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
php字符串倒叙
2021/04/01 PHP