`
caleb_520
  • 浏览: 250842 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

简单的树形菜单

WebHTML 
阅读更多
平时大家都会看见许多Web系统中有树形菜单的功能。我就举一个非常简单的树形菜单例子 

<html>
	<head>
		<title>菜单</title>
		<style type="text/css">
			body {
				font-family: arial, 宋体, serif;
				font-size:12px;
			}
			#nav {
				list-style-type: none;
				text-align: float;
			}
			#nav li ul {
				list-style-type: none;
				text-align: float;
			}
			.collapsed {
				display: none;
			}
			.expanded {
				display: "";
			}
		</style>
		<script language="javascript">
			function doMenu(menuid) {
				var obj = document.getElementById(menuid);
				obj.className = (obj.className == "collapsed" ? "expanded" : "collapsed");
			}
		</script>
	</head>
	<body>
		<div id="menu">
			<ul id="nav">
				<li><a href="#" onclick="doMenu('childmenu1')">我的电脑</a>
					<ul id="childmenu1" class="collapsed">
						<li>视频</li>
						<li>电子文档</li>
						<li>教材</li>
					</ul>
				</li>
				<li><a href="#" onclick="doMenu('childmenu2')">其他</a>
					<ul id="childmenu2" class="collapsed">
						<li>练习</li>
						<li>案例</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>


代码在附件中
  • menu.rar (570 Bytes)
  • 下载次数: 163
分享到：
| 实现网页全部以黑白显示
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    一个基于jQuery的简单树形菜单

    本主题聚焦于一个基于jQuery实现的简单树形菜单，这是一种轻量级且高效的方法，适用于各种Web应用。 jQuery是一个广泛使用的JavaScript库，简化了DOM操作、事件处理、动画以及Ajax交互。利用jQuery，我们可以快速...

    Java 实现的 简单树形菜单的生成 源码

    这个源码可能是为了帮助开发者理解和实现一个简单的树形菜单，使得用户可以通过展开和折叠节点来探索多级结构的信息。 首先，我们需要了解Java中的树形数据结构。在Java Swing库中，`javax.swing.tree`包提供了处理...

    jquery 树形菜单

    在这个例子中，我们创建了一个包含两个父节点和两个子节点的简单树形菜单。`setting`对象用于配置zTree的行为，`zNodes`是树形结构的数据源。`$.fn.zTree.init`函数用于启动zTree，将指定的DOM元素（#treeDemo）转换...

    java动态树形菜单

    本示例是一个基于Java实现的JSP动态树形菜单功能，旨在提供一个简单而全面的解决方案，覆盖了从数据获取到页面渲染的全过程。 首先，我们要理解树形菜单的基本概念。树形菜单是由节点（通常代表菜单项）构成的层级...

    HTML树形菜单

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

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

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

    java树形菜单

    这个压缩包“treemenu”很可能包含了一个简单的WinFrom应用程序，其中实现了树形菜单的功能。让我们深入探讨一下Java实现树形菜单的相关知识点。 1. **Swing组件与JTree**: 在Java Swing库中，`JTree`是用于创建树...

    好看实用js树形菜单

    以下是一个简单的JavaScript树形菜单的实现示例： ```javascript function renderMenu(data, parentEl) { for (let item of data) { let li = document.createElement('li'); let a = document.createElement('a...

    示例制作简单的树形菜单

    本文将深入探讨如何使用JavaScript来创建一个简单的树形菜单，并结合实际示例进行讲解。 首先，理解树形菜单的基本概念。树形菜单通常由节点（TreeNode）组成，每个节点可以包含子节点，形成层次结构。在JavaScript...

    树形菜单栏（html）

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

    树形菜单、用JS配合Struts1.2、Spring2。0、Ajax2.0的树形菜单

    在IT行业中，树形菜单是一种常见的用户界面元素，它用于以层次结构展示数据，使得用户能够清晰地理解和操作复杂的组织结构。在这个项目中，我们看到一个利用JavaScript、Struts1.2、Spring2.0以及Ajax2.0实现的树形...

    JavaScript与web树形菜单全

    以下是一个简单的无限级树形菜单的JavaScript实现概念： ```javascript function createTree(data, parentElement) { for (let item of data) { let li = document.createElement('li'); let a = document....

    jquery树形菜单例子

    在这个简单的示例中，`#treeview`是你的树形菜单容器的ID。`lightTreeview()`方法将这个容器转换为具有展开/折叠功能的树形菜单。 jQuery Light Treeview还支持各种配置选项，如自定义图标、节点的展开/折叠行为、...

    简单树形菜单实现(支持IE等浏览器)

    本教程将详细讲解如何实现一个简单且兼容IE浏览器的树形菜单。 首先，我们需要理解树形菜单的基本构成。通常，树形菜单由节点组成，每个节点可以有子节点，形成一棵多级的树。节点可以是文字、图标或两者结合，通过...

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

    描述中提到的“已封装，简单易用”，意味着这个JS树形菜单库已经过优化，开发者可以快速集成到自己的项目中，而无需深入了解复杂的实现细节。这通常涉及到提供清晰的API接口、简单的初始化步骤以及详尽的文档支持。 ...

    树形菜单插件

    在IT领域，树形菜单是一种常见的用户界面元素，它用于组织和展示层级关系的数据，比如文件系统、网站导航或组织结构。"树形菜单插件"是为网页或应用程序提供这种功能的软件组件。以下是对四款树形菜单插件的详细解释...

    C# 窗体中使用树形菜单的简单实例

    在C#编程环境中，创建和使用树形菜单是构建用户界面时常见的任务，尤其是在开发桌面应用程序时。树形菜单提供了一种层次结构的视图，允许用户以递归方式查看和操作数据。以下是一个关于如何在C#窗体中实现树形菜单的...

    jquery树形菜单

    "jquery树形菜单"是一个利用jQuery实现的交互式树形菜单组件，它提供了可折叠和收缩的功能，使得网页中的导航更加直观和用户友好。 树形菜单通常用于展示层级结构的数据，比如网站目录、文件系统或组织结构。通过...

    jquery树形菜单很好用理解又简单

    **jQuery树形菜单详解** ...总之，jQuery树形菜单以其简单易用、功能强大和良好的兼容性，成为了Web开发中处理层级结构数据的理想选择。通过不断学习和实践，开发者可以创造出更多富有创意和实用性的交互体验。

Magicbox
Global site tag (gtag.js) - Google Analytics