CSS静态页面的树形菜单
<!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>主页面</title>
<style type="text/css" >
a
{
text-decoration:none;
}
a,a:visited
{
color:#000;
background:inherit;
}
body
{
margin:0;
padding:20px;
font:12px tahoma,宋体,sans-serif;
}
dt
{
font-size:22px;
font-weight:bold;
margin:0 0 0 15px;
}
dd
{
margin:0 0 0 15px;
}
h4
{
margin:0;
padding:0;
font-size:18px;
text-align:center;
}
p
{
margin:0;
padding:0 0 0 18px;
}
p a,p a:visited
{
color:#00f;
background:inherit;
}
.TreeMenu img.s
{
cursor:hand;
vertical-align:middle;
}
.TreeMenu ul
{
padding:0;
}
.TreeMenu li
{
list-style:none;
padding:0;
}
.Closed ul
{
display:none;
}
.Child img.s
{
background:none;
cursor:default;
}
#CategoryTree ul
{
margin:0 0 0 17px;
}
#CategoryTree img.s
{
width:34px;
height:18px;
}
#CategoryTree .Opened img.s
{
background:url(skin3/opened.gif) no-repeat 0 1px;
}
#CategoryTree .Closed img.s
{
background:url(skin3/closed.gif) no-repeat 0 1px;
}
#CategoryTree .Child img.s
{
background:url(skin3/child.gif) no-repeat 13px 2px;
}
#CategoryTree
{
float:left;
width:249px;
border:1px solid #99BEEF;
background:#D2E4FC;
color:inherit;
margin:3px;
padding:3px;
}
</style>
<script language=jscript>
function ChangeStatus(o)
{
if (o.parentNode)
{
if (o.parentNode.className == "Opened")
{
o.parentNode.className = "Closed";
}
else
{
o.parentNode.className = "Opened";
}
}
}
</script>
</head>
<body>
<div class="TreeMenu" id="CategoryTree">
<h4>CSS树形菜单</h4>
<ul>
<li class="Opened">
<img class=s src="s.gif" onclick="javascript:ChangeStatus(this);">
<a href="#">第一大类</a>
<ul>
<li class="Opened"><img class=s src="s.gif" onclick="javascript:ChangeStatus(this);">
<a href="#">我的文档</a>
<ul>
<li class="Opened"><img class=s src="s.gif" onclick="javascript:ChangeStatus(this);">
<a href="#">JavaScrit</a>
<ul>
<li class="Child"><img class=s src="s.gif"><a href="#">常用小技巧</a></li>
<li class="Child"><img class=s src="s.gif"><a href="#">围绕鼠标的文字</a></li>
<li class="Child"><img class=s src="s.gif"><a href="#">OWC图表</a></li>
<li class="Child"><img class=s src="s.gif"><a href="#">锁定表列</a></li>
<li class="Child"><img class=s src="s.gif"><a href="#">B/S常用技巧</a></li>
<li class="Child"><img class=s src="s.gif"><a href="#">操作xml</a></li>
<li class="Child"><img class=s src="s.gif"><a href="#">生成guid</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="Opened">
<img class=s src="s.gif" onclick="javascript:ChangeStatus(this);">
<a href="#">第二大类</a>
<ul>
<li class="Opened"><img class=s src="s.gif" onclick="javascript:ChangeStatus(this);">
<a href="#">我的文档</a>
<ul>
<li class="Opened"><img class=s src="s.gif" onclick="javascript:ChangeStatus(this);">
<a href="#">JavaScrit</a>
<ul>
<li class="Child"><img class=s src="s.gif"><a href="#">常用小技巧</a></li>
<li class="Child"><img class=s src="s.gif"><a href="#">围绕鼠标的文字</a></li>
<li class="Child"><img class=s src="s.gif"><a href="#">OWC图表</a></li>
<li class="Child"><img class=s src="s.gif"><a href="#">锁定表列</a></li>
<li class="Child"><img class=s src="s.gif"><a href="#">B/S常用技巧</a></li>
<li class="Child"><img class=s src="s.gif"><a href="#">操作xml</a></li>
<li class="Child"><img class=s src="s.gif"><a href="#">生成guid</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
在IT领域，构建一个静态菜单树是网页设计中常见的任务，尤其对于大型网站或应用程序，一个清晰、层次分明的菜单树能帮助用户快速导航。在这个案例中，我们使用HTML、CSS和JavaScript这三种核心技术来创建这样的菜单...
在网页设计中，树形菜单是一种常见的用户界面元素，它以层级结构展示数据，使得信息组织清晰，便于用户浏览和导航。"CSS+JS无限极树形菜单"就是利用这两种前端技术来创建一个可以无限制扩展层级的树形菜单。下面我们...
一、CSS静态页面的树形菜单 1. CSS基础：CSS（层叠样式表）用于控制网页元素的样式和布局。在实现树形菜单时，我们可以通过CSS伪类（如`:hover`、`:active`）、`display`属性、`nth-child()`选择器等来实现菜单项的...
在传统的网页设计中，整个树形菜单可能会一次性加载所有节点，这可能导致页面加载速度慢，尤其是在数据量大或层次深的情况下。而采用Ajax动态加载则可以解决这一问题。 首先，我们需要创建HTML结构来呈现树形菜单的...
图标可以是静态的图像，也可以是动态的SVG或者CSS3动画，这大大提升了用户体验，使得树形菜单更加生动和直观。 至于"区域树形菜单"这个文件，我们可以推断这是一个示例或案例，可能包含了一种特定的地区分类树形...
首先，CSS是网页设计中控制布局和样式的语言，它可以用来创建静态或动态的树形菜单。例如，"CSS动态滑动菜单-标准树状导航菜单的实现.htm"可能包含了一个利用CSS3的动画效果，使得用户在鼠标悬停时，菜单项能平滑地...
手机Web树形菜单结构是一种高效的信息组织方式，尤其适用于内容层级复杂、需要清晰导航的场景。本文将深入探讨如何实现这样的菜单结构，以及其特点和优势。 手机Web树形菜单结构的设计目标是确保在小屏幕设备上也能...
在IT领域，树形菜单是一种常见的用户界面元素，尤其在数据层级结构复杂的应用中非常常见。这个名为"一棵很有意思的树形菜单"的例子，展示了如何通过简单的图像和效果创建一个自定义的树形菜单，而没有依赖现成的...
【标题】"jsp实现动态树形菜单"涉及的是在Web开发中使用JSP技术构建一个可以自动生成层次结构的交互式菜单系统。JSP（JavaServer Pages）是Java平台上的服务器端脚本语言，用于创建动态网页。动态树形菜单在网站中常...
树形菜单通常用于展示层级关系的数据，而这里的“非树形”的含义可能是指在没有明显层级结构的菜单中，通过某种方式模拟树形菜单的展开、收缩和点击行为。这种技术通常涉及到前端JavaScript或jQuery的交互设计，以及...
"AreaInfoTree.aspx" 文件很可能是 ASP.NET 的一个网页文件，其中包含 HTML、CSS 和 JavaScript 代码，用于展示 EasyUI 树形菜单。可能的实现方式是通过后台代码（C# 或 VB.NET）动态生成 JSON 数据，然后在前台用 ...
在IT行业中，前端开发经常会遇到需要展示层次结构数据的情况，比如组织架构、文件目录等，这时树形菜单就显得尤为重要。LayUI是一款优秀的前端框架，它提供了丰富的组件和样式，便于快速构建美观且功能强大的Web应用...
**jQuery zTree 树形菜单详解** jQuery zTree是一款基于jQuery的开源JavaScript库，用于创建交互式的树形菜单。它提供了丰富的配置选项、多种事件处理和灵活的数据接口，使得在网页中构建各种复杂的树结构变得非常...
树形菜单是一种常见且有效的组织信息的方式，它能清晰地展示层级关系，便于用户导航和操作。在这个场景下，我们讨论的是如何利用zTree这个JavaScript库来实现树形菜单。zTree是一款功能丰富的jQuery插件，专门用于...
**JSP树形菜单**是一种在网页中展示层次结构数据的有效方式，常见于网站的导航、目录或组织结构展示。这种菜单通常以节点的形式呈现，每个节点可以展开或折叠，显示其子节点。在给定的资源中，我们看到一个基于JSP...
3. **CSS样式**：为了美化树形菜单，CSS（层叠样式表）用于定义菜单的外观，如字体、颜色、边距、背景和过渡效果。使用伪类如`:hover`、`:active`和`:focus`可以实现不同状态的样式变化。 4. **jQuery与Bootstrap**...
树形菜单在网页设计中是一种常见且实用的交互元素，尤其在数据层级结构复杂时，它能有效地组织和展示信息。这种菜单以树状结构显示，通常用于网站导航、文件管理器、数据库浏览等场景，使得用户可以方便地展开、折叠...
在网页开发中，"伸缩树形菜单"和"树状菜单"是常见的交互元素，它们主要用于组织和展示层级结构的数据，例如网站导航、文件目录等。这两种菜单形式提供了良好的用户体验，用户可以通过展开和收缩节点来查看或隐藏子...
其中的关键特色是“树形菜单”，这是一种常见的网页导航结构，能够清晰地展示层级关系，方便用户快速定位和访问不同的功能模块。 “后台模板”是指用于构建网站或内容管理系统（CMS）后端控制面板的预设计布局和...