横纵菜单

最新推荐文章于 2020-04-24 11:27:40 发布

原创最新推荐文章于 2020-04-24 11:27:40 发布 · 232 阅读

0 ·

CC 4.0 BY-SA版权

【前端】-- BS 同时被 2 个专栏收录

14 篇文章

订阅专栏

【前端】-- JS

8 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JQuery实现的菜单效果，包括主菜单与子菜单的展开与折叠功能，并通过不同样式的调整实现了横向与纵向两种布局。

HTMl页代码

<!DOCTYPE html>
<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中建立  -->
		<!-- 新的ul ，再依次嵌套即可构建多层的菜单。 -->
		<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="#">子菜单项13</a>
					</li>
					<li>
						<a href="#">子菜单项14</a>
					</li>
				</ul>
			</li>
			<li class="main">
				<a href="#">菜单项3</a>
				<ul>
					<li>
						<a href="#">子菜单项15</a>
					</li>
					<li>
						<a href="#">子菜单项16</a>
					</li>
				</ul>
			</li>
		</ul>
		<br />
		<br />
		<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="#">子菜单项13</a>
					</li>
					<li>
						<a href="#">子菜单项14</a>
					</li>
				</ul>
			</li>
			<li class="hmain">
				<a href="#">菜单项3</a>
				<ul>
					<li>
						<a href="#">子菜单项15</a>
					</li>
					<li>
						<a href="#">子菜单项16</a>
					</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

CSS代码

ul,li{
	/* 去除圆点标识符 */
	list-style:none;
}
ul{
	padding:0;
	margin:0;	
}
.main,.hmain{
	background-image:url(../images/title.gif);
	/* 横向重复图片 */
	background-repeat:repeat-x;
	width:125px;
}
li{
	/* 全部li标签都为此色，但是由于主标签添加了图片，所以不会显示此背景色 */
	background-color:#EEEEEE;
}
a{
	/* 去除下划线 */
	text-decoration:none; 
	padding-left:20px;
	/* display的值为block来让a元素充满所在的区域。 */
	display:block;
	padding-top:10px;
	padding-bottom:10px;
}
.main a,.hmain a{
	color:white;
	background-image:url(../images/collapsed.gif);
	/* background-repeat的值为no-repeat时，背景图不会在所在的区域中重复显示。 */
	background-repeat:no-repeat;
	/* 可以用center,left,top这些值来控制横向和纵向的位置.这个属性的两个值,第一个对应横向,第二个对应纵向  */
	background-position:3px center;
}
.main li a,.hmain li a{
	color:black;
	/* background-image的值为none表示没有背景图  */
	background-image:none;
}
.main ul,.hmain ul{
	/* display的值为none可以用于隐藏元素。  */
	display:none;
}

.hmain{
	float:left;
	margin-right:1px;
}

JS代码

$(document).ready(function(){
	//页面中的DOM已经装载完成时，执行的代码
	//横向菜单
	$(".main a").click(function(){
		//找到主菜单项对应的子菜单项		
		var ulNode = $(this).next("ul");
		/*
		if(ulNode.css("display") == "none"){
			ulNode.css("display","block");
		}else{
			ulNode.css("display","none");
		}
		*/
		// toggle方法更为强大，可以省去我们判断元素是显示还是隐藏的状态，直接让显示的元素隐藏起来，隐藏的元素显示出来。
		ulNode.toggle();
		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')");
		}
	}
}