JS实现无限级网页折叠菜单实现无限级网页折叠菜单(类似树形菜单类似树形菜单)效果代码效果代码
主要介绍了JS实现无限级网页折叠菜单(类似树形菜单)效果代码,涉及JavaScript基于鼠标事件实现针对页面元素
结点的遍历及样式操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS实现无限级网页折叠菜单(类似树形菜单)效果代码。分享给大家供大家参考。具体如下：
这是一款超不错的网页折叠菜单，采用JavaScript实现。折叠菜单是大家比较常见到的一种菜单形式，可广泛应用于管理系
统、后台左侧、产品列表中，本折叠菜单有点树形菜单的味道，相信“无限级”会满足你的要求。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-unlimit-fade-in-out-tree-menu-codes/
具体代码如下：
<html>
<head>
<title>无限级折叠菜单JS版</title>
<style>
<!--
body,ul,h3 {margin:0px; padding:0px;}
li {list-style-type:none;}
body{
font-size:12px;
color:#333;
font-family: Simsun;
line-height:15px;
}
a{text-decoration:none;color:#004285;border:none;}
a:hover{text-decoration:none;color:#C33;}
#menu {
width:260px;
margin:50px auto;
padding:10px;
border:#EEE 1px solid;
}
#menu h3 {
font-size:12px;
}
#menu ul {
background:url("images/ul-bg.gif") repeat-y 5px 0px; overflow:hidden;
}
#menu ul li {
padding:5px 0 2px 15px;
background:url("images/tree-ul-li.gif") no-repeat 5px -32px;
}
#menu ul li ul {display:none;}
#menu ul li em {
cursor:pointer;
display:inline-block;
width:15px;
float:left;
height:15px;
margin-left:-14px;
background:url("images/tree-ul-li.gif") no-repeat -32px 2px;
}
#menu ul li em.off {
background-position: -17px -18px;
}
#menu ul li#end {
background-color:#FFF;
}
#menu ul.off {
display:block;
}
-->
</style>
</head>
<body>
<div id="menu">
<h3>无限级折叠菜单JavaScript版</h3>
<ul>
<li><em></em><a href='javascript:void(0);'>菜单_1_1</a>
下载后可阅读完整内容，剩余3页未读，立即下载
weixin_38621250
- 粉丝: 2
- 资源: 908
我的内容管理
展开
最新资源
- OptiX传输试题与SDH基础知识
- C++Builder函数详解与应用
- Linux shell (bash) 文件与字符串比较运算符详解
- Adam Gawne-Cain解读英文版WKT格式与常见投影标准
- dos命令详解：基础操作与网络测试必备
- Windows 蓝屏代码解析与处理指南
- PSoC CY8C24533在电动自行车控制器设计中的应用
- PHP整合FCKeditor网页编辑器教程
- Java Swing计算器源码示例：初学者入门教程
- Eclipse平台上的可视化开发：使用VEP与SWT
- 软件工程CASE工具实践指南
- AIX LVM详解：网络存储架构与管理
- 递归算法解析：文件系统、XML与树图
- 使用Struts2与MySQL构建Web登录验证教程
- PHP5 CLI模式：用PHP编写Shell脚本教程
- MyBatis与Spring完美整合：1.0.0-RC3详解
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
