`
txf2004
  • 浏览: 7040168 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

CNL Tree Menu Ver1.02无限级树形菜by CNLei枫岩

阅读更多
http://www.corange.cn//uploadfiles/5550b4c263580e1d0ff47775_25724.jpg


<!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" lang="zh-cn">
<head>
<title>CNL Tree Menu Ver1.02 - 无限级树形菜单 Written by CNLei, 枫岩 </title>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<meta name="generator" content="editplus" />
<meta name="author" content="CNLei,枫岩,www.cnlei.net" />
<meta name="keywords" content="CSS Menu,树形菜单,CNLei" />
<meta name="description" content="" />
<!--
**************************************
HTML Code for CNLTreeMenu
Version: Ver 1.02
Author : CNLei, 枫岩
E-Mail : CNLei.Y.L@gmail.com
MySite : http://www.cnlei.net
Passed : XHtml 1.0, CSS 2.0, IE5.0+, FF1.0+, Opera8.5+
Update : 2006-2-12
**************************************
-->
<link type="text/css" rel="stylesheet"

href="http://cnlei.iecn.net/mycode/CNLTreeMenu/Ver1.0.2/css/css4cnltreemenu.css" />
</head>
<body>
<p>实例演示:</p>
<dl>
<dt>CNL Tree Menu <small>Ver1.02</small></dt>
<dd><strong>Author</strong>:CNLei,枫岩</dd>
<dd><strong>MySite</strong>:<a href="http://www.cnlei.net" style="color:#00f;">www.cnlei.net</a></dd>
<dd><strong>E-Mail</strong>:cnlei.y.l<span style="color:#00f">#</span>gail.com (请将<span

style="color:#00f">#</span>换成<span style="color:#00f">@</span>)</dd>
<dd><strong>Intro</strong>:
<ol>
<li>"CNL Tree Menu"为无限级树形,兼容以下版本的浏览器:IE5.0+, FF1.06+, Opera8.5+ ……</li>
<li>HTML,CSS,JavaScript代码相互分离(即数据,风格,脚本三者分离),可应用于多种场合,易于维护修改;更换树形图标,

只需要修改CSS文件.</li>
<li>通过W3C校验(XHtml1-Strict,CSS1.0). </li>
<li>最后更新:2006-2-13 </li>
</ol>
</dd>
</dl>
<!--CNLTreeMenu Start:-->
<div class="CNLTreeMenu" id="CNLTreeMenu1">
<h4>CNL Tree Menu1</h4>
<p><a id="AllOpen_1" href="#" onclick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');">全部展开</a><a

id="AllClose_1" href="#" onclick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');" style="display:none;">全部折

叠</a></p>
<ul>
<li class="Opened"><a href="http://www.iecn.net">IECN.Net</a>
<ul>
<li><a href="#1">技术区</a>
<ul>
<li><a href="#">网页技术</a>
<ul>
<li class="Child"><a href="#">JavaScript</a></li><!--Child Node-->
<li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
<li class="Child"><a href="#">Ajax</a></li>
<li class="Child"><a href="#">网页制作工具</a></li>
<li class="Child"><a href="#">设计/图形</a></li>
<li class="Child"><a href="#">Flash/多媒体</a></li>
<li class="Child"><a href="#">VML/Web3D</a></li>
</ul></li><!--Sub Node 3-->
<li><a href="#">Web编程</a>
<ul>
<li class="Child"><a href="#">Java</a></li><!--Child Node-->
<li class="Child"><a href="#">.Net</a></li>
<li class="Child"><a href="#">ASP/VBScript</a></li>
<li class="Child"><a href="#">PHP</a></li>
<li class="Child"><a href="#">Perl/Python</a></li>
<li class="Child"><a href="#">Web综合/开源</a></li>
</ul></li><!--Sub Node 3-->
<li><a href="#">数据库</a>
<ul>
<li class="Child"><a href="#">Access/SQLServer</a></li><!--Child Node-->
<li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
<li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
</ul></li><!--Sub Node 3-->
<li><a href="#">服务器</a>
<ul>
<li class="Child"><a href="#">Windows/IIS</a></li><!--Child Node-->
<li class="Child"><a href="#">Unix/Linux/Apache</a></li>
<li class="Child"><a href="#">应用服务器</a></li>
</ul></li><!--Sub Node 3-->
</ul></li><!--Sub Node 2-->
<li><a href="#1">二级目录</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="Child"><a href="#">叶结点1</a></li><!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul></li><!--Sub Node n -->
</ul></li><!--Sub Node 6 -->
</ul></li><!--Sub Node 5 -->
</ul></li><!--Sub Node 4-->
</ul></li><!--Sub Node 3-->
</ul></li><!--Sub Node 2-->
<li><a href="#1">二级目录</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="Child"><a href="#">叶结点1</a></li><!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul></li><!--Sub Node n -->
</ul></li><!--Sub Node 6 -->
</ul></li><!--Sub Node 5 -->
</ul></li><!--Sub Node 4-->
</ul></li><!--Sub Node 3-->
</ul></li><!--Sub Node 2-->
</ul></li><!--Sub Node 1 -->
</ul>
</div><!-- CNLTreeMenu -->
<!--CNLTreeMenu1 End!-->
<!--CNLTreeMenu2 Start:-->
<div class="CNLTreeMenu" id="CNLTreeMenu2">
<h4>CNL Tree Menu2</h4>
<p><a id="AllOpen_2" href="#" onclick="MyCNLTreeMenu2.SetNodes(0);Hd(this);Sw('AllClose_2');">全部展开</a><a

id="AllClose_2" href="#" onclick="MyCNLTreeMenu2.SetNodes(1);Hd(this);Sw('AllOpen_2');" style="display:none;">全部折

叠</a></p>
<ul>
<li class="Opened"><a href="http://www.iecn.net">IECN.Net</a>
<ul>
<li><a href="#1">技术区</a>
<ul>
<li><a href="#">网页技术</a>
<ul>
<li class="Child"><a href="#">JavaScript</a></li><!--Child Node-->
<li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
<li class="Child"><a href="#">Ajax</a></li>
<li class="Child"><a href="#">网页制作工具</a></li>
<li class="Child"><a href="#">设计/图形</a></li>
<li class="Child"><a href="#">Flash/多媒体</a></li>
<li class="Child"><a href="#">VML/Web3D</a></li>
</ul></li><!--Sub Node 3-->
<li><a href="#">Web编程</a>
<ul>
<li class="Child"><a href="#">Java</a></li><!--Child Node-->
<li class="Child"><a href="#">.Net</a></li>
<li class="Child"><a href="#">ASP/VBScript</a></li>
<li class="Child"><a href="#">PHP</a></li>
<li class="Child"><a href="#">Perl/Python</a></li>
<li class="Child"><a href="#">Web综合/开源</a></li>
</ul></li><!--Sub Node 3-->
<li><a href="#">数据库</a>
<ul>
<li class="Child"><a href="#">Access/SQLServer</a></li><!--Child Node-->
<li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
<li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
</ul></li><!--Sub Node 3-->
<li><a href="#">服务器</a>
<ul>
<li class="Child"><a href="#">Windows/IIS</a></li><!--Child Node-->
<li class="Child"><a href="#">Unix/Linux/Apache</a></li>
<li class="Child"><a href="#">应用服务器</a></li>
</ul></li><!--Sub Node 3-->
</ul></li><!--Sub Node 2-->
<li><a href="#1">二级目录</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="Child"><a href="#">叶结点1</a></li><!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul></li><!--Sub Node n -->
</ul></li><!--Sub Node 6 -->
</ul></li><!--Sub Node 5 -->
</ul></li><!--Sub Node 4-->
</ul></li><!--Sub Node 3-->
</ul></li><!--Sub Node 2-->
<li><a href="#1">二级目录</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="Child"><a href="#">叶结点1</a></li><!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul></li><!--Sub Node n -->
</ul></li><!--Sub Node 6 -->
</ul></li><!--Sub Node 5 -->
</ul></li><!--Sub Node 4-->
</ul></li><!--Sub Node 3-->
</ul></li><!--Sub Node 2-->
</ul></li><!--Sub Node 1 -->
</ul>
</div><!-- CNLTreeMenu -->
<!--CNLTreeMenu2 End-->
<!--CNLTreeMenu3 Start:-->
<div class="CNLTreeMenu" id="CNLTreeMenu3">
<h4>CNL Tree Menu3</h4>
<p><a id="AllOpen_3" href="#" onclick="MyCNLTreeMenu3.SetNodes(0);Hd(this);Sw('AllClose_3');">全部展开</a><a

id="AllClose_3" href="#" onclick="MyCNLTreeMenu3.SetNodes(1);Hd(this);Sw('AllOpen_3');" style="display:none;">全部折

叠</a></p>
<ul>
<li class="Opened"><a href="http://www.iecn.net">IECN.Net</a>
<ul>
<li><a href="#1">技术区</a>
<ul>
<li><a href="#">网页技术</a>
<ul>
<li class="Child"><a href="#">JavaScript</a></li><!--Child Node-->
<li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
<li class="Child"><a href="#">Ajax</a></li>
<li class="Child"><a href="#">网页制作工具</a></li>
<li class="Child"><a href="#">设计/图形</a></li>
<li class="Child"><a href="#">Flash/多媒体</a></li>
<li class="Child"><a href="#">VML/Web3D</a></li>
</ul></li><!--Sub Node 3-->
<li><a href="#">Web编程</a>
<ul>
<li class="Child"><a href="#">Java</a></li><!--Child Node-->
<li class="Child"><a href="#">.Net</a></li>
<li class="Child"><a href="#">ASP/VBScript</a></li>
<li class="Child"><a href="#">PHP</a></li>
<li class="Child"><a href="#">Perl/Python</a></li>
<li class="Child"><a href="#">Web综合/开源</a></li>
</ul></li><!--Sub Node 3-->
<li><a href="#">数据库</a>
<ul>
<li class="Child"><a href="#">Access/SQLServer</a></li><!--Child Node-->
<li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
<li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
</ul></li><!--Sub Node 3-->
<li><a href="#">服务器</a>
<ul>
<li class="Child"><a href="#">Windows/IIS</a></li><!--Child Node-->
<li class="Child"><a href="#">Unix/Linux/Apache</a></li>
<li class="Child"><a href="#">应用服务器</a></li>
</ul></li><!--Sub Node 3-->
</ul></li><!--Sub Node 2-->
<li><a href="#1">二级目录</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="Child"><a href="#">叶结点1</a></li><!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul></li><!--Sub Node n -->
</ul></li><!--Sub Node 6 -->
</ul></li><!--Sub Node 5 -->
</ul></li><!--Sub Node 4-->
</ul></li><!--Sub Node 3-->
</ul></li><!--Sub Node 2-->
<li><a href="#1">二级目录</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="Child"><a href="#">叶结点1</a></li><!--Child Node-->
<li class="Child"><a href="#">叶结点2</a></li>
<li class="Child"><a href="#">叶结点3</a></li>
</ul></li><!--Sub Node n -->
</ul></li><!--Sub Node 6 -->
</ul></li><!--Sub Node 5 -->
</ul></li><!--Sub Node 4-->
</ul></li><!--Sub Node 3-->
</ul></li><!--Sub Node 2-->
</ul></li><!--Sub Node 1 -->
</ul>
</div><!-- CNLTreeMenu -->
<!--CNLTreeMenu3 End-->
<script type="text/javascript">
<!--
/*****************************
JavaScript Code for CNLTreeMenu
Version: Ver 1.02
Author : CNLei, 枫岩
E-Mail : CNLei.Y.L@gmail.com
MySite : http://www.cnlei.net
Passed : XHtml 1.0, CSS 2.0, IE5.0+, FF1.0+, Opera8.5+
Update : 2006-2-12
*****************************/
function Ob(o){
var o=document.getElementById(o)?document.getElementById(o):o;
return o;
}
function Hd(o) {
Ob(o).style.display="none";
}
function Sw(o) {
Ob(o).style.display="";
}
function ExCls(o,a,b,n){
var o=Ob(o);
for(i=0;i<n;i++) {o=o.parentNode;}
o.className=o.className==a?b:a;
}
function CNLTreeMenu(id,TagName0) {
this.id=id;
this.TagName0=TagName0==""?"li":TagName0;
this.AllNodes = Ob(this.id).getElementsByTagName(TagName0);
this.InitCss = function (ClassName0,ClassName1,ClassName2,ImgUrl) {
this.ClassName0=ClassName0;
this.ClassName1=ClassName1;
this.ClassName2=ClassName2;
this.ImgUrl=ImgUrl || "css/s.gif";
this.ImgBlankA ="<img src=\""+this.ImgUrl+"\" class=\"s\" onclick=\"ExCls

(this,'"+ClassName0+"','"+ClassName1+"',1);\" alt=\"展开/折叠\" />";
this.ImgBlankB ="<img src=\""+this.ImgUrl+"\" class=\"s\" />";
for (i=0;i<this.AllNodes.length;i++ ) {
this.AllNodes[i].className==""?this.AllNodes[i].className=ClassName1:"";
this.AllNodes[i].innerHTML=(this.AllNodes[i].className==ClassName2?this.ImgBlankB:this.ImgBlankA)+this.AllNodes

[i].innerHTML;
}
}
this.SetNodes = function (n) {
var sClsName=n==0?this.ClassName0:this.ClassName1;
for (i=0;i<this.AllNodes.length;i++ ) {
this.AllNodes[i].className==this.ClassName2?"":this.AllNodes[i].className=sClsName;
}
}
}
var MyCNLTreeMenu1=new CNLTreeMenu("CNLTreeMenu1","li");
MyCNLTreeMenu1.InitCss("Opened","Closed","Child","http://cnlei.iecn.net/mycode/CNLTreeMenu/Ver1.0.2/css/s.gif");
var MyCNLTreeMenu2=new CNLTreeMenu("CNLTreeMenu2","li");
MyCNLTreeMenu2.InitCss("Opened","Closed","Child","http://cnlei.iecn.net/mycode/CNLTreeMenu/Ver1.0.2/css/s.gif");
var MyCNLTreeMenu3=new CNLTreeMenu("CNLTreeMenu3","li");
MyCNLTreeMenu3.InitCss("Opened","Closed","Child","http://cnlei.iecn.net/mycode/CNLTreeMenu/Ver1.0.2/css/s.gif");
-->
</script>
</body>
</html>

分享到:
评论

相关推荐

    CNL Tree Menu 无限级CSS树形菜单 兼容各浏览器

    “CNL Tree Menu 无限级CSS树形菜单”是一款由CNLei开发的高质量、纯CSS实现的树形菜单系统,该系统兼容多种浏览器,包括但不限于IE5.0+、Firefox 1.0+以及Opera 8.5+等。它采用简洁优雅的设计风格,并且完全遵循W3C...

    js无限级树形菜单代码三种风格.rar

    一个js树控菜单 展开的树形菜单,js无限级树形菜单代码三种风格,看一下效果图便明白每一款风格的样式,觉得都是挺漂亮的,其实这是一款树菜菜单插件,名字叫做:"CNL Tree Menu",无限级树形,具有以下特点:浏览器...

    自带3种风格的js TreeView树形菜单插件.rar

    自带3种风格的js TreeView树形菜单插件,"CNL Tree Menu"为无限级树形,兼容以下版本的浏览器:IE5.0 , FF1.06 , Opera8.5 ……HTML,CSS,JavaScript代码相互分离(即数据,风格,脚本三者分离),可应用于多种场合,...

    IMSL CNL 7.0.0 (x86-64)Crack

    IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

    SerialIO_30.100.1902.3_CNL-PCH_RS5_v2.zip

    标题中的"SerialIO_30.100.1902.3_CNL-PCH_RS5_v2.zip"是一个特定版本的驱动程序压缩包,主要用于解决神州精盾U47T1笔记本电脑在更换操作系统后触摸板无法正常工作的问题。这个驱动程序的版本号为30.100.1902.3,...

    cnl:(过时的)CNL

    cnl 组件库 API文件: 安装 npm install --save cnl 浏览器 用法 cnl = require ' cnl ' 建造 git clone https://github.com/nhz-io/cnl.git cd cnl npm install gulp 基准 执照 麻省理工学院 版本 0.0.26

    script无级限下拉菜单

    "CNL.TreeMenu.1.0.2v"这个文件名可能表示这是一个名为"TreeMenu"的JavaScript库的版本1.0.2。"Tree"暗示了菜单可能以树状结构呈现,这与无限级下拉菜单的概念相符。版本号表明这是该库的一个特定迭代,可能包含了...

    cnl.cpp

    cnl.cpp

    PyPI 官网下载 | open_cnl-0.1.tar.gz

    《PyPI官网下载:探索open_cnl-0.1.tar.gz中的Python库》 在Python的世界里,PyPI(Python Package Index)是开发者们的重要资源库,它为全球的Python项目提供了一个集中的分发平台。当我们看到"PyPI 官网下载 | ...

    CNL FUNCTON

    CNL FUNCTON,即IMSL (International Matrix Software Library) C函数库,是一个广泛使用的数学和统计计算库,专为各种科学、工程和金融应用而设计。这个库在超过30年的历史中,已经建立了可靠性和高效性的声誉。...

    机器学习方法对砂砾岩岩屑成分的预测——以西北缘X723井百口泉组为例.pdf

    标题中的“机器学习方法对砂砾岩岩屑成分的预测——以西北缘X723井百口泉组为例”表明了这篇论文的核心内容是利用机器学习技术来预测砂砾岩岩屑的成分,并且这个预测是基于西北缘X723井百口泉组的实际案例。...

    余姚太平洋 CNL-1型电阻应变式扭矩传感器手册.pdf

    余姚太平洋CNL-1型电阻应变式扭矩传感器是一种用于测量非连续旋转状态下的扭矩的精密设备。这种传感器由WEIGHING ENGINEERING CO., LTD制造,产品型号为CNL-1。扭矩传感器是工程和工业领域中十分关键的元件,它能够...

    BP神经网络技术在碳酸盐岩岩性识别中的应用.pdf

    BP神经网络技术在碳酸盐岩岩性识别中的应用 BP神经网络技术在碳酸盐岩岩性识别中的应用是当今岩性识别领域中的一个热点话题,本文将对BP神经网络技术在碳酸盐岩岩性识别中的应用进行详细的介绍和分析。 一、碳酸盐...

    CNL_adaptative_MSAP_MSAP_

    标题中的"CNL_adaptative_MSAP_MSAP_"可能指的是一个特定的研究或项目,其中包含了对MSAP(多尺度分析程序)的自适应版本的探讨。"mode glissant"是法语,意为“滑动模式”,在信号处理或数据分析中通常指滑动窗口...

    cnl.rar_线性方程组

    线性方程组通常由一组形如Ax=b的方程构成,其中A是一个m×n阶的矩阵,x是n维列向量,b是m维列向量。方程组的目标是找到向量x,使得对于所有的i(1≤i≤m),都有Aixi=b_i成立。线性方程组的解可能有唯一解、无解或无穷...

    测井识别奥陶系碳酸盐岩储集层技术学习教案.pptx

    这篇教程主要讲解了测井技术在识别奥陶系碳酸盐岩储集层中的应用,适合从事地质勘探和油井分析的专业人士学习。首先,我们了解了测井的基本概念,包括电法测井、声法测井和核磁测井等不同方法。这些测井方法通过测量...

    ORA-01436 与 层次查询CONNECT BY

    开发遇到一个报错 ORA-01436: CONNECT BY loop in user data (ORA-01436: 用户数据中的 CONNECT BY 循环)。 1. 报错原因 根据网上的资料,产生这个错误的原因是数据形成了循环。例如下面这个语句: SELECT r1....

    matlab插值代码解释-Index_overview_CNL:Index_overview_CNL

    索引CNL github 为CNL github编制索引 目录 如何保持该索引为最新 为了找到我们在线发布的所有代码,我们需要一些概述。 通过查看此索引,我们可以了解到这一点。 但是,只有我们都保持最新状态,此索引才有效。 ...

    透析C语言(CNL内部培训)

    综合经典面试试题、网络博客、文库资源总结的C深入培训资料! 望大家共同学习,共同进步!

Global site tag (gtag.js) - Google Analytics