第一种
<!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>
分享到：
- 2008-01-29 22:45
- 浏览 1137
- 评论(0)
- 论坛回复 / 浏览 (0 / 4200)
- 查看更多
相关推荐
在Java Web开发中，动态树形菜单是一种常见的用户界面元素，尤其在管理系统的导航部分，它能够以层次结构展示数据，使用户能直观地浏览和操作复杂的数据结构。本示例是一个基于Java实现的JSP动态树形菜单功能，旨在...
在Java编程中，树形菜单是一种常见的用户界面元素，它以层次结构展示数据，通常用于文件系统、组织架构或程序功能导航。这个压缩包“treemenu”很可能包含了一个简单的WinFrom应用程序，其中实现了树形菜单的功能。...
HTML树形菜单是一种常见的网页交互元素...在实际开发中，开发者可能会根据需求选择不同的实现方式，从简单的纯JavaScript实现到使用成熟的前端框架，如React、Vue或Angular，来构建更复杂、功能更丰富的树形菜单组件。
树形菜单在IT界是一种常见的用户界面元素，尤其在数据层级结构复杂的应用中，如文件管理系统、组织架构展示、导航菜单等。它以图形化的方式展现了数据间的层次关系，使得用户能够直观地理解和操作这些数据。本文将...
在这个“jsp树形菜单 dtree tree 树形菜单”的项目中，我们将探讨如何利用JSP、dtree库以及可能的Struts框架来创建一个动态的树形菜单。 首先，JSP（JavaServer Pages）是一种基于Java的技术，用于创建动态Web内容...
在IT行业中，树形菜单是一种常见的用户界面元素，尤其在网站和应用程序的导航设计中扮演着重要角色。这种菜单结构模仿了计算机科学中的树数据结构，以层级方式展示信息，使得用户可以方便地浏览和访问多级内容。下面...
在这个“ajax树形菜单 动态显示”的项目中，我们关注的是如何利用Ajax技术来实现一个交互式的、只在需要时加载内容的树形菜单。 树形菜单是一种常见的用户界面元素，它通过层级结构来展示信息，常用于网站导航、...
JS无限级树形菜单3种
在JavaScript编程中，树形菜单是一种常见的用户界面元素，它以层级结构展示数据，通常用于网站导航、文件系统浏览或数据库记录的展示。本压缩包包含两个文件："可以拖动的IEtree树型.htm" 和 "树型结构_lj不错.htm"...
在本案例中，"好看实用js树形菜单"是指利用JavaScript实现的一种交互式的、可视化的菜单结构，它通常用于网站或应用程序的导航，帮助用户更方便地浏览和访问层次结构的数据。 树形菜单的核心在于其递归的结构，每个...
在IT行业中，构建一个无限级树形菜单是常见的需求，特别是在Web应用中，用于组织和展示层次结构的数据。本项目“s2sh+freemarker+jquery+jquery-treeview 无限级树形菜单”就是这样一个解决方案，它整合了多种技术来...
树形菜单栏在网页设计中是一种常见的交互元素，主要用于组织和展示层次结构的数据或功能模块。在HTML中实现树形菜单栏，通常结合JavaScript、CSS以及可能的服务器端技术来完成。这里我们将深入探讨如何使用HTML和...
JavaScript树形菜单是一种常见的网页交互元素，用于展示层次结构的数据，比如网站导航、文件系统或者组织结构图。在网页设计中，它能有效地节省空间，提高用户体验，让用户能够以直观的方式浏览和操作多层次的信息。...
而Bootstrap Treeview.js是一个专门用于创建树形结构的JavaScript库，它可以轻松地集成到Bootstrap环境中，实现下拉框中的树形菜单。 首先，要实现Bootstrap树形下拉框，你需要包含以下关键文件： 1. Bootstrap CSS...
在网页设计中，创建交互式的用户界面是至关重要的，而CSS树形菜单就是实现这一目标的有效工具。"很不错的css树形菜单"这个项目显然旨在提供一个可扩展、易维护的解决方案，帮助开发者构建出层次清晰、易于导航的菜单...
在IT领域，树形菜单是一种常见的用户界面元素，尤其在网页设计和软件开发中，它被广泛用于组织和展示层次化的数据。树形菜单通常由节点（或称为项）组成，每个节点可以有子节点，形成一个类似树状的结构。这种结构...
在本话题中，我们主要讨论的是使用JavaScript实现的树形菜单，它是一种常见的用户界面元素，用于展示层次结构的数据。 树形菜单在网页设计中扮演着重要角色，它可以将复杂的层级关系以简洁直观的方式呈现给用户。...
关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的啊 网页关于JS树形菜单的...
在网页设计和开发中，树形菜单是一种常见且实用的导航结构，尤其适用于展示层级关系清晰的信息或功能。本文将深入探讨"实用树形菜单插件"这一主题，旨在帮助开发者更好地理解和应用这类插件。 首先，我们来理解什么...