`
chixianhuadeyu
  • 浏览: 67295 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

树形菜单

    博客分类:
  • ajax
阅读更多
第一种

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>nav</title> 
<script type="text/javascript"> 
<!--  
startList = function() {  
  if (document.all&&document.getElementById) {  
    navRoot = document.getElementById("nav");  
    for (i=0; i<navRoot.childNodes.length; i++) {  
      node = navRoot.childNodes[i];  
      if (node.nodeName=="li") {  
        node.onmouseover=function() {  
          this.className+="on";   
        }   
        node.onmouseout=function() {  
          thisthis.className=this.className.replace("on", "");   
        }  
      }  
    }  
  }  
}  
window.onload=startList;  
--> 
</script> 
<style type="text/css"> 
<!--  
body {  
  font-size: 12px   
  font-family: Arial,Verdana,Helvetica,sans-serif;  
}  
 
ul{  
  margin: 0;  
  padding: 0;  
  list-style: none;  
  width: 200px;  
}  
 
ul li {  
  position: relative;  
}  
 
ul li ul {  
  position: absolute;  
  left: 199px;  
  top: 0;  
  display: none;  
  list-style: none;  
  width: 200px;  
  margin: 0;  
  padding: 0;  
}  
 
ul li a {  
  display: block;  
  text-decoration: none;  
  background: #cccccc;  
  padding:5px 0 5px 20px;  
  border: 1px solid #ffffff;  
  border-bottom: 0;  
  color:#666666;  
}  
 
ul li a:hover {  
  background: #cc0000;  
  color:#ffffff;  
  font-weight:bold;  
}  
 
* html ul li {  
  float: left;  
  height: 1%;  
}  
* html ul li a {  
  height: 1%;  
}  
 
li:hover ul, li.on ul {  
  display: block;  
}   
 
--> 
</style> 
</head> 
 
<body> 
<ul id="nav"> 
    <li><a href="#">menu1</a> 
        <ul class="nav2"> 
            <li><a href="#">first</a></li> 
            <li><a href="#">second</a></li> 
        </ul> 
    </li> 
    <li><a href="#">menu2</a> 
        <ul class="nav2"> 
            <li><a href="#">first</a></li> 
            <li><a href="#">second</a></li> 
            <li><a href="#">third</a></li> 
        </ul> 
    </li> 
    <li><a href="#">menu3</a> 
        <ul class="nav2"> 
            <li><a href="#">first</a></li> 
            <li><a href="#">second</a></li> 
            <li><a href="#">third</a></li> 
            <li><a href="#">forth</a></li> 
            <li><a href="#">fifth</a></li> 
        </ul> 
    </li> 
    <li><a href="#">menu4</a> 
        <ul class="nav2"> 
            <li><a href="#">first</a></li> 
            <li><a href="#">second</a></li> 
            <li><a href="#">third</a></li> 
            <li><a href="#">forth</a></li> 
            <li><a href="#">fifth</a></li> 
            <li><a href="#">sixth</a></li> 
        </ul> 
    </li> 
</ul> 
</body> 
</html>

第二种

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>nav</title> 
<script type=text/javascript> 
<!--  
var LastLeftID = "";  
 
function DoMenu(emid){  
    var obj = document.getElementById(emid);   
    obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");  
    if((LastLeftID!="")&&(emid!=LastLeftID)){  
        document.getElementById(LastLeftID).className = "collapsed";  
    }  
        LastLeftID = emid;  
}  
--> 
</script> 
 
<style type="text/css"> 
<!--  
body {  
font-family: Arial,Verdana,Helvetica,sans-serif;  
font-size:12px;  
}  
#nav {  
width:180px;  
list-style-type: none;  
text-align:left;  
margin:10px 0 0 10px;  
}  
 
#nav a {  
width: 180px;   
display: block;  
padding:5px 0 5px 20px;  
}  
 
#nav li {  
background:#cccccc;  
border-bottom:#ffffff 1px solid;  
float:left;  
}  
 
#nav li a:hover{  
background:#cc0000;  
}  
 
#nav a:link  {  
color:#666;  
text-decoration:none;  
}  
 
#nav a:visited  {  
color:#666;  
text-decoration:none;  
}  
 
#nav a:hover  {  
color:#ffffff;  
text-decoration:none;  
font-weight:bold;  
}  
 
#nav li ul {  
list-style:none;  
text-align:left;  
}  
 
#nav li ul li{   
background: #ebebeb;  
}  
 
#nav li ul a{  
padding-left:20px;  
width:180px;  
}  
 
#nav li ul a:link  {  
color:#666;  
text-decoration:none;  
}  
#nav li ul a:visited  {  
color:#666;  
text-decoration:none;  
}  
#nav li ul a:hover {  
color:#f3f3f3;  
text-decoration:none;  
font-weight:normal;  
background:#cc0000;  
}  
 
#nav li:hover ul {  
left: auto;  
}  
#nav li.sfhover ul {  
left: auto;  
}  
#content {  
clear: left;   
}  
#nav ul.collapsed {  
display: none;  
}  
--> 
</style> 
</head> 
<body> 
<ul id="nav"> 
    <li><a href="#Menu=ChildMenu1"  onclick="DoMenu('ChildMenu1')">menu1</a> 
         <ul id="ChildMenu1" class="collapsed"> 
             <li><a href="#">first</a></li> 
             <li><a href="#">second</a></li> 
             <li><a href="#">third</a></li> 
             <li><a href="#">forth</a></li> 
             <li><a href="#">fifth</a></li> 
         </ul> 
    </li> 
    <li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">menu2</a> 
         <ul id="ChildMenu2" class="collapsed"> 
             <li><a href="#">first</a></li> 
             <li><a href="#">second</a></li> 
             <li><a href="#">third</a></li> 
             <li><a href="#">forth</a></li> 
             <li><a href="#">fifth</a></li> 
         </ul> 
    </li> 
    <li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">menu3</a> 
         <ul id="ChildMenu3" class="collapsed"> 
             <li><a href="#">first</a></li> 
             <li><a href="#">second</a></li> 
             <li><a href="#">third</a></li> 
             <li><a href="#">forth</a></li> 
             <li><a href="#">fifth</a></li> 
         </ul> 
    </li> 
    <li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">menu4</a> 
         <ul id="ChildMenu4" class="collapsed"> 
             <li><a href="#">first</a></li> 
             <li><a href="#">second</a></li> 
             <li><a href="#">third</a></li> 
             <li><a href="#">forth</a></li> 
             <li><a href="#">fifth</a></li> 
         </ul> 
    </li> 
</ul> 
</body> 
</html> 
分享到:
评论

相关推荐

    java动态树形菜单

    在Java Web开发中,动态树形菜单是一种常见的用户界面元素,尤其在管理系统的导航部分,它能够以层次结构展示数据,使用户能直观地浏览和操作复杂的数据结构。本示例是一个基于Java实现的JSP动态树形菜单功能,旨在...

    java树形菜单

    在Java编程中,树形菜单是一种常见的用户界面元素,它以层次结构展示数据,通常用于文件系统、组织架构或程序功能导航。这个压缩包“treemenu”很可能包含了一个简单的WinFrom应用程序,其中实现了树形菜单的功能。...

    HTML树形菜单

    HTML树形菜单是一种常见的网页交互元素...在实际开发中,开发者可能会根据需求选择不同的实现方式,从简单的纯JavaScript实现到使用成熟的前端框架,如React、Vue或Angular,来构建更复杂、功能更丰富的树形菜单组件。

    树形菜单 三种使用的树形菜单

    树形菜单在IT界是一种常见的用户界面元素,尤其在数据层级结构复杂的应用中,如文件管理系统、组织架构展示、导航菜单等。它以图形化的方式展现了数据间的层次关系,使得用户能够直观地理解和操作这些数据。本文将...

    jsp树形菜单 dtree tree 树形菜单

    在这个“jsp树形菜单 dtree tree 树形菜单”的项目中,我们将探讨如何利用JSP、dtree库以及可能的Struts框架来创建一个动态的树形菜单。 首先,JSP(JavaServer Pages)是一种基于Java的技术,用于创建动态Web内容...

    树形菜单例子

    在IT行业中,树形菜单是一种常见的用户界面元素,尤其在网站和应用程序的导航设计中扮演着重要角色。这种菜单结构模仿了计算机科学中的树数据结构,以层级方式展示信息,使得用户可以方便地浏览和访问多级内容。下面...

    ajax树形菜单 动态显示

    在这个“ajax树形菜单 动态显示”的项目中,我们关注的是如何利用Ajax技术来实现一个交互式的、只在需要时加载内容的树形菜单。 树形菜单是一种常见的用户界面元素,它通过层级结构来展示信息,常用于网站导航、...

    JS无限级树形菜单

    JS无限级树形菜单3种

    javascript制作 树形菜单.zip

    在JavaScript编程中,树形菜单是一种常见的用户界面元素,它以层级结构展示数据,通常用于网站导航、文件系统浏览或数据库记录的展示。本压缩包包含两个文件:"可以拖动的IEtree树型.htm" 和 "树型结构_lj不错.htm"...

    好看实用js树形菜单

    在本案例中,"好看实用js树形菜单"是指利用JavaScript实现的一种交互式的、可视化的菜单结构,它通常用于网站或应用程序的导航,帮助用户更方便地浏览和访问层次结构的数据。 树形菜单的核心在于其递归的结构,每个...

    s2sh+freemarker+jquery+jquery-treeview 无限级树形菜单.rar

    在IT行业中,构建一个无限级树形菜单是常见的需求,特别是在Web应用中,用于组织和展示层次结构的数据。本项目“s2sh+freemarker+jquery+jquery-treeview 无限级树形菜单”就是这样一个解决方案,它整合了多种技术来...

    树形菜单栏(html)

    树形菜单栏在网页设计中是一种常见的交互元素,主要用于组织和展示层次结构的数据或功能模块。在HTML中实现树形菜单栏,通常结合JavaScript、CSS以及可能的服务器端技术来完成。这里我们将深入探讨如何使用HTML和...

    (推荐)超级漂亮的JS树形菜单

    JavaScript树形菜单是一种常见的网页交互元素,用于展示层次结构的数据,比如网站导航、文件系统或者组织结构图。在网页设计中,它能有效地节省空间,提高用户体验,让用户能够以直观的方式浏览和操作多层次的信息。...

    bootstrap树形下拉框 下拉框树形菜单

    而Bootstrap Treeview.js是一个专门用于创建树形结构的JavaScript库,它可以轻松地集成到Bootstrap环境中,实现下拉框中的树形菜单。 首先,要实现Bootstrap树形下拉框,你需要包含以下关键文件: 1. Bootstrap CSS...

    很不错的css树形菜单

    在网页设计中,创建交互式的用户界面是至关重要的,而CSS树形菜单就是实现这一目标的有效工具。"很不错的css树形菜单"这个项目显然旨在提供一个可扩展、易维护的解决方案,帮助开发者构建出层次清晰、易于导航的菜单...

    经典的树形菜单源码经典的树形菜单源码

    在IT领域,树形菜单是一种常见的用户界面元素,尤其在网页设计和软件开发中,它被广泛用于组织和展示层次化的数据。树形菜单通常由节点(或称为项)组成,每个节点可以有子节点,形成一个类似树状的结构。这种结构...

    js树形菜单,完全兼容

    在本话题中,我们主要讨论的是使用JavaScript实现的树形菜单,它是一种常见的用户界面元素,用于展示层次结构的数据。 树形菜单在网页设计中扮演着重要角色,它可以将复杂的层级关系以简洁直观的方式呈现给用户。...

    树形菜单树形菜单树形菜单树形菜单

    关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的...

    实用树形菜单插件

    在网页设计和开发中,树形菜单是一种常见且实用的导航结构,尤其适用于展示层级关系清晰的信息或功能。本文将深入探讨"实用树形菜单插件"这一主题,旨在帮助开发者更好地理解和应用这类插件。 首先,我们来理解什么...

Global site tag (gtag.js) - Google Analytics