`

基于jQuery的菜单

阅读更多

JSP代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>JQuery实战-菜单效果</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
		<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
		<script type="text/javascript" src="js/menu.js"></script>
		<link type="text/css" rel="stylesheet" href="css/menu.css" />
	</head>
	<body>
		<ul>
			<li class="main">
					<a href="#">菜单项1</a>
				<ul>
					<li>
						<a href="#">子菜单项11</a>
					</li>
					<li>
						<a href="#">子菜单项12</a>
					</li>
				</ul>
			</li>
			<li class="main">
				<a href="#">菜单项2</a>
				<ul>
					<li>
						<a href="#">子菜单项21</a>
					</li>
					<li>
						<a href="#">子菜单项22</a>
					</li>
				</ul>
			</li>
			<li class="main">
				<a href="#">菜单项3</a>
				<ul>
					<li>
						<a href="#">子菜单项31</a>
					</li>
					<li>
						<a href="#">子菜单项32</a>
					</li>
				</ul>
			</li>
		</ul>
		<br />
		<br />
		<br />
		<ul>
			<li class="hmain">
					<a href="#">菜单项1</a>
				<ul>
					<li>
						<a href="#">子菜单项11</a>
					</li>
					<li>
						<a href="#">子菜单项12</a>
					</li>
				</ul>
			</li>
			<li class="hmain">
				<a href="#">菜单项2</a>
				<ul>
					<li>
						<a href="#">子菜单项21</a>
					</li>
					<li>
						<a href="#">子菜单项22</a>
					</li>
				</ul>
			</li>
			<li class="hmain">
				<a href="#">菜单项3</a>
				<ul>
					<li>
						<a href="#">子菜单项31</a>
					</li>
					<li>
						<a href="#">子菜单项32</a>
					</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

 JS代码
$(document).ready(function(){
	$(".main>a").click(function(){
		//找到子菜单项对应的子菜单,即下一个兄弟节点
		var ulNode = $(this).next("ul");
		/* 第一种显示隐藏*/
		/*if(ulNode.css("display") == "none"){
			ulNode.css("display" , "block");
		}else {
			ulNode.css("display","none");
		}*/
		
		
		/* 第二种显示和隐藏 */
		/*if(ulNode.css("display") == "none"){
			ulNode.show("200");
		}else {
			ulNode.hide("slow");
		}*/
		
		/* 第三种显示和隐藏 */
		//ulNode.toggle("200");
		
		/* 第四种显示和隐藏 */
		if(ulNode.css("display") == "none"){
			ulNode.slideDown("200");
		}else {
			ulNode.slideUp("200");
		}
		
		/* 第五种显示和隐藏 */
		//ulNode.slideToggle("500");
		
		changeIcon($(this));
	});
	$(".hmain").hover(function(){
		$(this).children("ul").slideDown();
		changeIcon($(this).children("a"));
	},function(){
		$(this).children("ul").slideUp();
		changeIcon($(this).children("a"));
	});
});
/**
 * 修改主菜单的指示图标
 */
function changeIcon(mainNode) {
	if (mainNode) {
		if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
			mainNode.css("background-image","url('images/expanded.gif')");
		} else {
			mainNode.css("background-image","url('images/collapsed.gif')");
		}
	}
}
 CSS代码
ul, li {
	/*清除ul和li上默认的小圆点*/
	list-style: none;
}
ul {
	/*清除子菜单的缩进值*/
	padding: 0;
	margin: 0;
}
.main, .hmain {
	background-image: url(../images/title.gif);
	background-repeat: repeat-x;
	width: 120px;
}
li {
	background-color: #EEEEEE;
}
a {
	/*取消所有的下划线*/
	text-decoration: none;
	padding-left: 20px;
	display: block;
	display: inline-block;
	width: 100px;
	padding-top: 3px;
	padding-bottom: 3px;
}
.main a, .hmain a {
	color: white;
	background-image: url(../images/collapsed.gif);
	background-repeat: no-repeat;
	background-position: 3px center;
}
.main li a, .hmain li a {
	color: black;
	background-image: none;
}
.main ul, .hmain ul {
	display: none;
}
.hmain {
	float: left;
	margin-right: 1px;
}
 效果图片

 

  • 大小: 20.2 KB
分享到:
评论

相关推荐

    基于jQuery弹性展开收缩菜单插件

    "基于jQuery的弹性展开收缩菜单插件"就是为了解决这个问题,提供一种动态、响应式的菜单解决方案。这种插件利用了jQuery库的强大功能,使得菜单在用户操作时可以平滑地展开和收缩,增加用户与网站之间的互动感。 ...

    基于jquery的菜单

    标题中的"superfish-1.4.8"指的是Superfish插件,这是一个流行的jQuery菜单插件,它提供了多种可定制的下拉菜单效果。Superfish的特点在于其平滑的过渡效果、对触摸设备的支持以及防止鼠标悬停问题的能力,使菜单在...

    基于jquery的网页右键菜单设置,js多级菜单

    标题中提到的"基于jquery的网页右键菜单设置"是指通过jQuery来创建和控制网页上的右键菜单。这种菜单通常是在用户点击鼠标右键时弹出,提供一系列与当前选中元素相关的操作选项。相比于传统的HTML菜单,jQuery右键...

    基于jQuery和Bootstrap的垂直手风琴下拉菜单

    今天我们要为大家分享一款基于jQuery和Bootstrap的垂直手风琴下拉菜单,因为它是Bootstrap风格的,所以外观上绝对可以称得上完美。另外,菜单项在展开的时候,菜单项的内容将会以飞入的动画特效展示出来,同时菜单项...

    基于jquery ui可自由拖拽的弹性圆形菜单效果

    在这个特定的案例中,我们关注的是一个基于jQuery UI的创新实现——“可自由拖拽的弹性圆形菜单效果”。 这个效果的核心在于将jQuery UI的交互性与动画库anime.js相结合,创造出一种引人注目的用户体验。jQuery UI...

    基于jquery自定义菜单

    至于`min-menu`这个文件名,可能是经过压缩优化的jQuery菜单插件或样式表。在实际项目中,这样的文件通常包含了已压缩和优化过的JavaScript或CSS代码,以提高页面加载速度。为了使用这个文件,需要将其引入到HTML文...

    漂亮的基于jQuery实用下拉菜单代码

    本文将深入探讨一个基于jQuery的实用下拉菜单代码,结合了div+css技术,实现了美观且功能强大的效果,适用于网页设计和广告设计场景。 首先,jQuery是一个流行的JavaScript库,它的出现大大简化了JavaScript的使用...

    半圆扇形的网页个性菜单,基于jQuery插件实现.rar

    半圆扇形的网页个性菜单,基于jQuery插件实现,兼容IE6浏览器,鼠标点击那些圆形按钮,菜单整体会旋转,菜单中心会显示二级子菜单,本菜单运行了jquery技术,兼容IE6浏览器,各方面都表现不错哦。

    基于jquery的鼠标右键菜单插件

    本主题聚焦于一个基于jQuery实现的鼠标右键菜单插件,该插件为开发者提供了一种灵活且易于定制的方式来添加自定义的右键上下文菜单到网页元素上。以下是对这个插件的详细解析。 ### 一、jQuery简介 jQuery是由John ...

    基于jquery的垂直菜单特效

    本主题将深入探讨"基于jQuery的垂直菜单特效",结合CSS3技术,打造富有吸引力且易用的网页导航。 一、jQuery简介 jQuery是一款广泛使用的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画制作和Ajax交互...

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

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

    基于jQuery UI的跨设备响应式水平菜单特效

    "基于jQuery UI的跨设备响应式水平菜单特效"就是针对这一需求而设计的一种技术解决方案。这个标题表明我们正在讨论一种使用jQuery UI库来创建的,能够在不同设备上自适应的水平菜单。这种菜单能够根据用户的屏幕尺寸...

    基于jQuery的自定义鼠标右键菜单

    本文将详细讲解如何利用jQuery实现自定义的鼠标右键菜单,为用户提供更加便捷的功能。 首先,我们需要了解jQuery的核心概念。jQuery通过选择器(Selectors)选取HTML元素,然后对这些元素进行操作。例如,`$("#...

    基于jquery宽屏菜单导航.zip

    实现效果: 基于jquery宽屏菜单导航,宽屏菜单,适合自适应网站上使用,菜单导航对网站的用处有很大,可以减少用户地体验时间,从而看到他想看的内容!php中文网推荐下载!

    基于jquery的超强树形菜单

    "基于jQuery的超强树形菜单"是一个专门用于构建这种交互式树状菜单的库,它提供了丰富的功能和定制选项,使得在网页上创建具有复选框、级联效果以及图片展示的树形菜单变得轻而易举。 jQuery是一个广泛使用的...

    基于jquery+bootstrap的侧边栏收缩菜单

    总结来说,这个基于jQuery和Bootstrap的侧边栏收缩菜单项目展示了如何利用这两者的优势来创建动态、响应式的网页界面。通过理解jQuery的事件处理和DOM操作,以及Bootstrap的组件和响应式特性,开发者可以轻松创建出...

    动态收缩的横向滑动菜单,基于jquery框架.rar

    这个资源,"动态收缩的横向滑动菜单,基于jquery框架.rar",提供了这样一个功能丰富的解决方案,特别适合用于博客或其他内容丰富的网站。 jQuery是一个轻量级、高性能的JavaScript库,它极大地简化了JavaScript编程...

    基于jquery的CMS后台管理系统网站模板

    **基于jQuery的CMS后台管理系统网站模板详解** 在Web开发领域,内容管理系统(CMS)是用于构建和维护网站的工具,而后台管理系统则是CMS的核心部分,它负责管理网站的内容、用户、权限等。本模板——“基于jQuery的...

    基于jquery的改进型(右键)列表菜单

    花生米AJAX-UI系列之:基于JQUERY的浮动层(右键)列表菜单0.2改进版 改版本是“使用JQUERY 自创的自定义右键菜单插件 ”的重大改进,原始版本不再使用! 可以对表格,列表,或者单个DOM容器进行右键绑定 菜单项的...

Global site tag (gtag.js) - Google Analytics