`
xiaolng
  • 浏览: 31928 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

简单的二级导航树

 
阅读更多
文件清单
  • jquery-1.6.2.js
  • navigation.js
  • main.css
  • navigation.html

直接上代码
引用
navigation.js代码

$(function(){
	Navigation_init();
});

Navigation_init = function (){
	//依次为事件链接初始化index,以便区分触发事件导航
	$('ul.root_ul a.root_a').each(function(index,element){
		$(this).attr('index',index);
	});
	$('ul.child_ul a.child_a').each(function(index,element){
		$(this).attr('index',index);
	});
	//绑定点击事件
	$('ul.root_ul a.root_a').click(function(){
		AdjustCss(this);
		var ul = $(this).siblings('ul');
		var show = ul.is(':visible');
		var i = $(this).attr('index');
		if (!show) {
			$('ul.root_ul a.root_a:lt(' + i + ')').siblings('ul').slideUp(400);
			$('ul.root_ul a.root_a:gt(' + i + ')').siblings('ul').slideUp(400);
			$(this).siblings('ul').slideDown(400);
		}
		Event_execute(i,'level0_a');
	});
	//绑定点击事件
	$('ul.child_ul a.child_a').click(function(){
		AdjustCss(this);
		var ul = $(this).siblings('ul');
		var show = ul.is(':visible');
		var i = $(this).attr('index');
		if (!show) {
			$('ul.child_ul a.child_a:lt(' + i + ')').siblings('ul').slideUp(400);
			$('ul.child_ul a.child_a:gt(' + i + ')').siblings('ul').slideUp(400);
			$(this).siblings('ul').slideDown(400);
		}
		Event_execute(i,'level1_a');
	});
}

/**
 * 调节选择后的样式 
 * @param item
 */
AdjustCss = function(item){
	$('ul.root_ul').find('a.root_a').each(function(index, element) {
		if ($(this).attr("class").indexOf("selected") >= 0) {
			$(this).removeClass('selected');
		};
	});
	$('ul.child_ul').find('a.child_a').each(function(index, element) {
		if ($(this).attr("class").indexOf("selected") >= 0) {
			$(this).removeClass('selected');
		};
	});
	$(item).addClass("selected") 
}

/**
 * 触发事件后要执行函数
 * @param index
 * @param level
 */
Event_execute = function(index,level){
	$('#content').html($('a[index='+index+'][class~='+level+']').text());
}


引用
main.css代码

@CHARSET "UTF-8";
body{margin:0 auto;padding:0;font-size:12px;font-family:Arial '宋体'}
ul,li{list-style:none; width:140px;padding:0;margin:0;}
.navigation{margin:0;padding:5px;width:150px;display:block;float:left;background-color:#FFFFFF;}
ul.root_ul{float:left;list-style: none;}
li.root_li{float:left;margin:0 0 1px 0; border-bottom:1px solid  #D7D7D7;}
li.root_li:last-child{border-bottom:medium none;}
ul li.root_li a.selected{color:#ea3234;text-decoration:none;}
ul li.root_li a{width:140px;height:15px;display:block;float:left;outline-style: none;text-decoration:none;color:#666666;background-color:#E6E6E6;font-size:15px;padding:5px 0;}
ul li.root_li a:hover{color:#ea3234;cursor: pointer;outline-style: none;text-decoration:underline;}
ul.child_ul{float:left;list-style:none inside none;padding:0 0 1 0;}
li.child_li{height:25px;display:block;float:left;border-bottom:1px dotted #666666;}
li.child_li:last-child{border-bottom:medium none;}
ul li.child_li a.selected{color:#ea3234;text-decoration:none;}
ul li.child_li a{width:130px;height:12px;outline-style: none;text-decoration:none;color:#666666;background-color:#FFFFFF;font-size:12px;padding:5px 0 5px 10px; }
ul li.child_li a:hover{color:#ea3234;cursor: pointer;outline-style: none;text-decoration:underline;}
.hide{display:none;}
.show{display:block;}


引用
navigation.html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/main.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.6.2.js" ></script>
<script type="text/javascript" src="js/navigation.js" ></script>
<title>Insert title here</title>
</head>
<body>
<div class="navigation">
	<ul class="root_ul">
		<li class="root_li">
			<a href="#" class="root_a level0_a"><span>导航一</span></a>
			<ul class="child_ul hide">
				<li class="child_li"><a href="#" class="child_a level1_a">一组</a>
					<ul class="child_ul hide">
						<li class="child_li"><a href="#" class="child_a level1_a">一组</a></li>
						<li class="child_li"><a href="#" class="child_a level1_a">二组</a></li>
						<li class="child_li"><a href="#" class="child_a level1_a">三组</a></li>
						<li class="child_li"><a href="#" class="child_a level1_a">四组</a></li>
					</ul>
				</li>
				<li class="child_li"><a href="#" class="child_a level1_a">二组</a></li>
				<li class="child_li"><a href="#" class="child_a level1_a">三组</a></li>
				<li class="child_li"><a href="#" class="child_a level1_a">四组</a></li>
			</ul>
		</li>
		<li class="root_li">
			<a href="#"  class="root_a level0_a"><span>导航二</span></a>
			<ul class="child_ul hide">
				<li class="child_li"><a href="#" class="child_a level1_a">一组</a></li>
				<li class="child_li"><a href="#" class="child_a level1_a">二组</a></li>
				<li class="child_li"><a href="#" class="child_a level1_a">三组</a></li>
				<li class="child_li"><a href="#" class="child_a level1_a">四组</a></li>
			</ul>
		</li>
		<li class="root_li">
			<a href="#"  class="root_a level0_a"><span>导航三</span></a>
			<ul class="child_ul hide">
				<li class="child_li"><a href="#" class="child_a level1_a">一组</a></li>
				<li class="child_li"><a href="#" class="child_a level1_a">二组</a></li>
				<li class="child_li"><a href="#" class="child_a level1_a">三组</a></li>
				<li class="child_li"><a href="#" class="child_a level1_a">四组</a></li>
			</ul>
		</li>
		<li class="root_li">
			<a href="#" class="root_a level0_a"><span>导航四</span></a>
			<ul class="child_ul hide">
				<li class="child_li"><a href="#" class="child_a level1_a">一组</a></li>
				<li class="child_li"><a href="#" class="child_a level1_a">二组</a></li>
				<li class="child_li"><a href="#" class="child_a level1_a">三组</a></li>
				<li class="child_li"><a href="#" class="child_a level1_a">四组</a></li>
			</ul>
		</li>
	</ul>
</div>
<div id='content'></div>
</body>
</html>
分享到:
评论

相关推荐

    一个简单的二级目录树

    这个“一个简单的二级目录树”的示例,很可能是关于如何使用ExtJS创建一个包含二级目录结构的树形组件的教程。ExtJS的目录树(TreeView)是其组件模型的一部分,常用于展现层级关系的数据,比如文件系统、组织结构...

    树形二级导航

    简单实用的树形二级导航,好看实用,内容可以修改。纯css制作

    jquery树形渐变显示二级导航菜单

    本话题主要关注"jquery树形渐变显示二级导航菜单"这一技术,它结合了jQuery库的动态效果和树形结构,为二级下拉菜单赋予更生动的用户体验。 jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件...

    js+css简单后台二级树形菜单demo示例

    在这个“js+css简单后台二级树形菜单demo示例”中,我们将探讨如何利用JavaScript和CSS来创建一个后台管理界面的二级树形菜单。这个示例将涵盖以下几个关键知识点: 1. **HTML 结构**: - 树形菜单的基础是HTML的...

    jquery树形导航菜单插件制作滑动多级二级下拉菜单展示

    本文将深入探讨如何使用jQuery来创建一个树形导航菜单,它具有滑动效果的多级二级下拉菜单功能,并且支持无限层级的嵌套。 首先,jQuery是一个轻量级的JavaScript库,它的API简洁易用,使得动态操作DOM(文档对象...

    树形菜单 二级菜单

    在IT界,尤其是在网页开发中,树形菜单和二级菜单是常见的交互元素,它们用于组织和展示层次结构的信息。本文将深入探讨这两种菜单的概念、实现方式以及基于jQuery的树形菜单构建方法。 首先,让我们理解“树形菜单...

    二级树形菜单示例:CSS+TreeMenu

    在网页设计中,二级树形菜单是一种常见的交互元素,它用于组织和展示层次结构的数据,如网站导航或复杂的选项列表。这种菜单结构通常由主菜单项和子菜单项组成,子菜单项在用户悬停或点击主菜单项时展开。在本示例中...

    jQuery后台左侧三级导航菜单

    三级导航菜单通常包括一级菜单、二级菜单和三级菜单,它们按照层次结构展开。在后台设计中,左侧布局通常用于放置导航菜单,因为它节省空间且符合用户习惯。三级菜单的实现主要涉及以下步骤: 1. **HTML结构**:...

    淘网址 tao123 导航源码 完美高仿 支持二级目录 v1 3

    淘网址 tao123 源码今日发布 整站源码完美完成 唯一一个支持二级目录无错乱的源码 满足使用二级目录做站的朋友 淘123的源码结构简单清晰 适合各大草根站长 源码完全免费 源码一如既往纯净 完整 无错乱 无弹窗 还你...

    各种(多个)web导航树菜单 静态 动态

    在Web开发中,导航树菜单是一种常见的用户界面元素,它以树状结构展示网站或应用程序的层次结构。这种菜单能够帮助用户快速理解网站的布局,有效地进行导航。本主题主要探讨的是静态和动态两种类型的Web导航树菜单,...

    纵向3级导航

    例如,一个简单的实现可能包括隐藏二级和三级菜单,然后通过点击一级菜单项来显示其对应的二级菜单,再次点击二级菜单项则显示三级菜单。 对于动态生成的树或多级导航,开发者通常会利用JavaScript库,如jQuery或者...

    操作系统大型实验-二级目录文件系统模拟

    2. 链表和树结构:二级目录结构可以被抽象为一种树形结构,其中每个节点代表一个目录,而叶子节点代表文件。Java的`java.util.LinkedList`和`java.util.TreeMap`等数据结构可以用来实现这种结构。 3. 异步I/O:Java...

    ztree二级树菜单(SSI框架下)--hulian平台二版代码

    【标题】"ztree二级树菜单(SSI框架下)--hulian平台二版代码"涉及的知识点主要集中在zTree这个JavaScript库的使用上,以及它在服务器端包含(SSI,Server-Side Include)框架下的应用。zTree是一个功能强大的jQuery...

    原生js仿新浪游戏频道下拉二级导航菜单列表.zip

    在本项目中,“原生js仿新浪游戏频道下拉二级导航菜单列表.zip”是一个压缩包,其中包含了实现一个使用纯JavaScript(原生JS)编写的,模仿新浪游戏频道的下拉二级导航菜单的代码示例。这个功能在网页设计和开发中...

    菜单树形结构,支持三级、多级树形结构代码

    例如,一级菜单下可以包含二级菜单,二级菜单下还可以有三级菜单,以此类推。在本项目中,代码支持至少三级的树形结构,但理论上可以扩展到任意深度,满足更灵活的需求。 手写代码的好处在于可读性和可定制性高,...

    下拉框二级联动

    在网页设计中,"下拉框二级联动"是一种常见的交互设计模式,主要用于处理层次结构的数据展示,例如地区选择、分类导航等。这种设计通常涉及到两个或多个下拉框,其中第二个下拉框的内容会根据第一个下拉框的选择动态...

    二级文件操作系统

    【二级文件操作系统】是一种设计用于Linux系统的简单多用户文件系统,其主要目标是让学生通过实践设计,深入理解文件系统的内部工作原理和实现机制。在设计过程中,学生需要结合数据结构、程序设计和计算机原理等多...

    三种常用树菜单

    二、动态加载树菜单 在处理大量数据时,一次性加载所有节点可能导致性能问题。动态加载树菜单应运而生,它只在需要时加载子节点,即按需加载。当用户点击一个父节点时,相关的子节点才会从服务器请求并显示。这种...

    ListView 二级菜单

    此时,我们就需要用到`ExpandableListView`,它是一个增强版的ListView,支持展开和折叠子项,能够很好地处理二级或更深层次的菜单。 `ExpandableListView`的特性: 1. **层级结构**:与ListView不同,...

    html简单易懂树形无限极。

    例如,一级目录可以用`&lt;li&gt;`直接放在`&lt;ul&gt;`中,二级目录则作为一级目录的子项,以此类推,实现无限级的树形结构。 描述中提到的"一个简单而且强大的树形制作方便实用,易上手",这可能是指存在一种特定的方法或者库...

Global site tag (gtag.js) - Google Analytics