JQuery——横纵向菜单设计

最新推荐文章于 2017-12-29 10:04:06 发布

壳壳的后宫

最新推荐文章于 2017-12-29 10:04:06 发布

阅读量1k

点赞数

分类专栏： ********@JQuery 前端专区

本文链接：https://blog.csdn.net/xiaoyao0909/article/details/50236893

版权

前端专区同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

********@JQuery

2 篇文章 0 订阅

订阅专栏

JQuery就是用JS写的，方便编程的一个方法集合。jQuery就好比把一些js的效果事先做好了，并进行了封装，然后直接调用就行了。你用javascript实现一个动画效果说不定写很长的一段代码，然而jQuery开发者事先写好了，你只需要用他的函数直接调用就可以了。两种区别也不是很大，无非就是jQuery更简单，印证了jQuery的口号jQuery: The Write Less, Do More；JavaScript Library。

下面的实践要实现的功能是点击或鼠标进入父菜单时，显示子菜单；再次点击或鼠标移出父菜单时，子菜单隐藏。

实践二：横纵向菜单设计

menu.html

<!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">
		<link type="text/css" rel="stylesheet" href="css/menu.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/menu.js"></script>
	</head>
	<body> <!--以ul和li来创建列表的层级关系-->
		<ul> 
		    <!--li有顺序的列表-->
			<li class="main">
			        <!--a标签用于触发动作的标记-->
					<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>

menu.css

ul, li {
	/*清除ul和li上默认的小圆点*/
	list-style: none;
}
ul {
	/*清除子菜单的缩进值*/
	padding: 0;
	margin: 0;  /*与IE兼容*/
}
.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;
	/*以块级元素显示，使得a充满其所在区域*/
	display: block;
	display: inline-block;/*兼容IE6*/
	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;
}


/*横向菜单，把上面的main标记处也加上hmain*/
.hmain {
	float: left;
	margin-right: 1px; /*菜单与菜单的距离*/
}

menu.js

$(document).ready(function(){
	//页面中的DOM已经装载完成时，执行的代码
	//$(".main > a")选择器基于jquery
	$(".main > a").click(function(){
		//找到主菜单项对应的子菜单项
		var ulNode = $(this).next("ul");
		/*
		//直观的方式是当子菜单没有显示时，就让它的显示出来
		if (ulNode.css("display") == "none") {
			ulNode.css("display","block");
		} else {
			ulNode.css("display","none");
		}
		*/
		//ulNode.show("slow");//参数表明出现时的速度，也可以为normal或fast或数值
		//ulNode.hide();
		//ulNode.toggle();//省去了写if else的麻烦
		//
		//ulNode.slideDown("slow");//与show/hide相似用途
		//ulNode.slideUp;
		ulNode.slideToggle();
		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')");
		}
	}
}

结果：