当前位置:首页 > 开发 > Web前端 > Css > 正文

无限级CSS树形菜单

发表于: 2015-11-13   作者:互联网   来源:转载   浏览次数:
css
摘要: <!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/x

<!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">
<!-- 第1级 开始 -->
<li class="TreeOpened"><a href="#">IECN.Net</a>
<ul>
<!-- 第2级 开始 -->
<li><a href="#">技术区</a>
<ul>
<!-- 第3级 开始 -->
<li><a href="#">网页技术</a>
<ul>
<!-- 第4级 内容 -->
<li class="TreeChild"><a href="#">JavaScript</a></li><!--TreeChild Node-->
<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>
<!-- 第3级 结束 -->

<!-- 第3级 开始 -->
<li><a href="#">Web编程</a>
<ul>
<!-- 第4级 内容 -->
<li class="TreeChild"><a href="#">Java</a></li><!--TreeChild Node-->
<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>
<!-- 第3级 结束 -->

<!-- 第3级 开始 -->
<li><a href="#">数据库</a>
<ul>
<!-- 第4级 内容 -->
<li class="TreeChild"><a href="#">Access/SQLServer</a></li><!--TreeChild Node-->
<li class="TreeChild"><a href="#">MySQL/PostgreSQL</a></li>
<li class="TreeChild"><a href="#">Oracle/DB2/Sybase</a></li>
</ul>
</li>
<!-- 第3级 结束 -->

<!-- 第3级 开始 -->
<li><a href="#">服务器</a>
<ul>
<!-- 第4级 内容 -->
<li class="TreeChild"><a href="#">Windows/IIS</a></li><!--TreeChild Node-->
<li class="TreeChild"><a href="#">Unix/Linux/Apache</a></li>
<li class="TreeChild"><a href="#">应用服务器</a></li>
</ul>
</li>
<!-- 第3级 结束 -->
</ul>
</li>
<!-- 第2级 结束 -->

<!-- 第2级 开始 -->
<li><a href="#">二级目录</a>
<ul>
<!-- 第3级 开始 -->
<li><a href="#">三级目录</a>
<ul>
<!-- 第4级 开始 -->
<li><a href="#">四级目录</a>
<ul>
<!-- 第5级 开始 -->
<li><a href="#">五级目录</a>
<ul>
<!-- 中间级 开始 -->
<li><a href="#">......</a>
<ul>
<!-- 第n级 开始 -->
<li><a href="#">第n级目录</a>
<ul>
<!-- 第n+1级 内容 -->
<li class="TreeChild"><a href="#">最终节点1</a></li><!--TreeChild Node-->
<li class="TreeChild"><a href="#">最终节点2</a></li>
<li class="TreeChild"><a href="#">最终节点3</a></li>
</ul>
</li>
<!-- 第n级 结束 -->
</ul>
</li>
<!-- 中间级 结束 -->
</ul>
</li>
<!-- 第5级 结束 -->
</ul>
</li>
<!-- 第4级 结束 -->
</ul>
</li>
<!-- 第3级 结束 -->
</ul>
</li>
<!-- 第2级 结束 -->

<!-- 第2级 开始 -->
<li><a href="#">第二个二级目录</a>
<ul>
<!-- 第3级 开始 -->
<li><a href="#">第二个三级目录</a>
<ul>
<!-- 第4级 开始 -->
<li><a href="#">第二个四级目录</a>
<ul>
<!-- 第5级 开始 -->
<li><a href="#">第二个五级目录</a>
<ul>
<!-- 中间级 开始 -->
<li><a href="#">......</a>
<ul>
<!-- 第n级 开始 -->
<li><a href="#">第二个第n级目录</a>
<ul>
<!-- 第n+1级 内容 -->
<li class="TreeChild"><a href="#">最终节点1</a></li><!--TreeChild Node-->
<li class="TreeChild"><a href="#">最终节点2</a></li>
<li class="TreeChild"><a href="#">最终节点3</a></li>
</ul>
</li>
<!-- 第n级 结束 -->
</ul>
</li>
<!-- 中间级 结束 -->
</ul>
</li>
<!-- 第5级 结束 -->
</ul>
</li>
<!-- 第4级 结束 -->
</ul>
</li>
<!-- 第3级 结束 -->
</ul>
</li>
<!-- 第2级 结束 -->

</ul>
</li>
<!-- 第1级 结束 -->
</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";
else
praOBJ.parentNode.className = "TreeOpened";
}

function initTreeMenu()
{
/* 得到ID名称为 TreeMenu 中全部的<li>,代入对象数组 */
this.AllNodesOBJ = document.getElementById("TreeMenu").getElementsByTagName("li");

for (i = 0; i < this.AllNodesOBJ.length; i++ )
{
/* 把没有定义 class 名称的<li>定义为 TreeClosed */
if (this.AllNodesOBJ[i].className == "")
this.AllNodesOBJ[i].className = "TreeClosed";

/* 在 class 名称不是 TreeChild 的<li>的<a>的外面,再增加一个临时 div ,点击这个 div 则执行 funSwitch 函数 */
if (this.AllNodesOBJ[i].className != "TreeChild")
{
var myHTMLIna = this.AllNodesOBJ[i].getElementsByTagName("a")[0].outerHTML.toString();
this.AllNodesOBJ[i].getElementsByTagName("a")[0].outerHTML = "<div class='TreeTMP' onclick='javascript:funSwitch(this);'>" + myHTMLIna + "</div>";
}
}
}

/*
展开或关闭全部节点
全部展开用法:funSwitchAllNodes("Open","AllOpenID","AllCloseID");
全部关闭用法:funSwitchAllNodes("Close","AllOpenID","AllCloseID");
*/
function funSwitchAllNodes(praSwitch,praOpenID,praCloseID)
{
var myClassName;
if (praSwitch == "Open")
{
myClassName = "TreeOpened";
document.getElementById(praOpenID).style.display="none";
document.getElementById(praCloseID).style.display="inline";
}

if (praSwitch == "Close")
{
myClassName = "TreeClosed";
document.getElementById(praOpenID).style.display="inline";
document.getElementById(praCloseID).style.display="none";
}

/* 得到ID名称为 TreeMenu 中全部的<li>,代入对象数组 */
this.AllNodesOBJ = document.getElementById("TreeMenu").getElementsByTagName("li");

for (i = 0; i < this.AllNodesOBJ.length; i++ )
{
if (this.AllNodesOBJ[i].className != "TreeChild")
this.AllNodesOBJ[i].className = myClassName;
}
}

initTreeMenu();            

-->
</script>

</body>
</html>

 

无限级CSS树形菜单

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
经常在项目中遇到建立无限级树形菜单展示的效果,这里简单地做了一个,基本后台代码如下: privateData
先上效果图 首先说说jquery-treeview 这个插件,这里有官方的demo http://jquery.bassistance.de/tr
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml
一、问题研究的背景和意义 在Web应用程序开发领域,基于AJAX技术的JavaScript树形控件已经被广泛使用
/** *栏目树分级显示下拉菜单组件 *作者:CandySunPlus 孙凤鸣 *example: *var colObj2 = {"Items":
/** *栏目树分级显示下拉菜单组件 *作者:CandySunPlus 孙凤鸣 *example: *var colObj2 = {"Items":
<?php /** * 树形结构操作模型:改进的前序遍历 —— 表必备字段: id,name,lft,rgt,nlevel */ cla
二级树形菜单,学习了 html代码 <body> <ul id="nav"> <li><a href="#Menu=Ch
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号