<!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>css实现的目录树型导航菜单</title>
<style>
ul { padding:0; margin:0;}
#main1,#main2 ,#main3 { width:100px; height:28px; line-height:28px; padding-left:5px; background:#990000; cursor:pointer; border-bottom:1px solid #fff;}/*主菜单背景颜色*/
#child1,#child2,#child3 { width:105px; background:#999999;}/*二级菜单背景颜色*/
#child1 ul li,#child2 ul li,#child3 ul li { padding-left:5px; border-bottom:1px solid #fff; line-height:180%;}
#child1 ul li a,#child2 ul li a,#child3 ul li a { color:#0000ff;}/*二级字体颜色*/
.style2 {font-size: 12px}
</style>
</head>
<body>
<div class="style2" id="main1" onClick="document.all.child1.style.display=(document.all.child1.style.display =='none')?'':'none'" > + 主目录1</div>
<div class="style2" id="child1" style="display:none">
<ul>
<li><a href="#">- 子目录1</a></li>
<li><a href="#">- 子目录2</a></li>
<li><a href="#">- 子目录3</a></li>
<li><a href="#">- 子目录4</a></li>
</ul>
</div>
<div class="style2" id="main2" onClick="document.all.child2.style.display=(document.all.child2.style.display =='none')?'':'none'" > + 主目录2 </div>
<div class="style2" id="child2" style="display:none">
<ul>
<li><a href="#">- 子目录1</a></li>
<li><a href="#">- 子目录2</a></li>
<li><a href="#">- 子目录3</a></li>
<li><a href="#">- 子目录4</a> </li>
</ul>
</div>
<div class="style2" id="main3" onClick="document.all.child3.style.display=(document.all.child3.style.display =='none')?'':'none'" > + 主目录3 </div>
<div class="style2" id="child3" style="display:none">
<ul>
<li><a href="#">- 子目录1</a></li>
<li><a href="#">- 子目录2</a></li>
<li><a href="#">- 子目录3</a></li>
<li><a href="#">- 子目录4</a> </li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
此外，树型导航菜单的实现还可以利用现代前端框架，如React、Vue或Angular。这些框架提供了组件化的开发方式，可以更高效地构建和维护复杂的应用。例如，在React中，可以创建一个名为`TreeMenu`的组件，包含`...
在IT领域，构建一个可操作的多级目录树型结构菜单是常见的需求，尤其是在Web应用中，用于组织和展示复杂的层级关系，如文件系统、权限管理或者导航菜单。这款"多级目录树型结构菜单js代码"正是为解决这类问题而设计...
在网页设计中，树型菜单是一种常见的用户界面元素，它以层级结构展示信息，使得用户可以方便地导航和浏览复杂的目录或数据结构。本项目聚焦于使用CSS（层叠样式表）和JavaScript来创建功能强大的树型菜单。下面将...
在IT行业中，动态生成的树型导航菜单是一种常见的前端交互设计，它能够根据后端数据库中的数据自动生成，为用户提供直观、高效的导航体验。本文将深入探讨如何实现这样的功能，并结合给定的“树菜单”文件，分析其...
在IT领域，尤其是在网页开发中，构建一个多级目录树型结构菜单是常见的需求，它可以用于网站导航、文件管理系统等场景。这种菜单能够清晰地展示层级关系，帮助用户更有效地浏览和操作大量的信息。本资源“多级目录...
1：Html代码 下级 <input id=subsubfolder1 type=checkbox /> <li class=file><a>下级</a></li> 下级 <input id=subsubfolder2 type=checkbox /> <li class=file><a>无限级</a></li> ...li cl
该技术通过结合HTML、CSS以及JavaScript来实现动态、交互式的树状导航菜单，广泛应用于商品分类、文章分类等多种场景。 #### 二、HTML结构 此树型菜单主要基于HTML5标准文档类型定义，通过`<!DOCTYPE html>`声明，...
`menu.js` 文件是实现目录树型菜单的核心。我们可以使用JavaScript的DOM操作来动态创建和管理菜单项。以下是一个简单的示例： ```javascript // 假设我们有如下的数据结构来表示目录树 var data = [ {name: '父...
在JavaScript编程中，创建可折叠的树型目录菜单是一项常见的任务，尤其在网站导航或文件管理系统中非常实用。本项目通过结合HTML、CSS和JavaScript技术，实现了一个动态、交互式的树形菜单。以下是对这个压缩包文件...
在这个项目中，CSS被用来创建动态的树形菜单，这种菜单通常用于展示层级关系，比如网站的导航、文件目录等。通过CSS，我们可以控制菜单项的显示、隐藏、颜色、字体、边框以及鼠标悬停时的效果，使其既美观又实用。 ...
这种菜单在JavaScript（简称js）的帮助下可以轻松实现，为用户提供了一种直观且高效的导航方式。本文将详细讲解如何使用JavaScript来创建一个树型下拉菜单。 首先，我们需要理解树型下拉菜单的基本结构。它通常由一...
在网页设计中，用户界面的交互性和易用性至关重要，其中下拉菜单是常见的导航元素。当涉及到多级树型结构时，JS（JavaScript）的运用可以创建出既美观又功能强大的下拉菜单。本篇文章将深入探讨如何利用JS实现漂亮的...
- `TreeView_Keyboard.js` 和 `keyboard.js`：这两个文件可能实现了键盘导航功能，使用户可以通过键盘快捷键来操作树型菜单，提高操作效率。 - `images`：这个目录很可能包含了菜单中使用的图像资源，如箭头图标、...
在树型导航菜单中，CSS用于定义每个菜单项的样式，包括字体、颜色、布局以及鼠标悬停时的高亮效果。可能还会用到CSS3的过渡效果和动画来增强用户体验，例如平滑地展开和收缩子菜单。 HTML5是现代网页开发的标准，...
在本资源包中，我们聚焦于使用JavaScript和CSS来实现这种交互式的树型导航条。 首先，让我们深入理解JavaScript在这其中的作用。JavaScript是一种广泛用于网页动态效果的编程语言，它可以操作DOM（Document Object ...
实现这些“超酷多种风格树型菜单效果”通常依赖于JavaScript库和CSS框架。如压缩包中的“dhtml-tree-menu-200”，这可能是一个JavaScript库，专门用于创建动态的、交互式的树型菜单。JavaScript允许动态地创建和修改...
在实际应用中，树型动态菜单常用于网站的导航系统，帮助用户快速定位和访问多级分类的内容。例如，在一个电子商务网站中，菜单可以展示产品类别，用户可以通过点击一级分类展开二级、三级分类，直至找到具体商品。...
树型菜单能够有效地组织和展示层级关系的数据，如文件系统、导航菜单等。本篇文章将详细解析如何使用JavaScript来实现这样的功能。 首先，理解树型菜单的基本结构至关重要。树型菜单是由节点（Node）组成的，每个...
在IT行业中，树型菜单是一种常见的用户界面元素，尤其在网站和应用程序的导航设计中扮演着重要角色。本文将深入探讨“非常好用的树型JS菜单”这一主题，结合提供的文件列表，分析其核心功能和实现方式。 首先，标题...