JQuery实战总结二横向纵向菜单下拉效果图

最新推荐文章于 2020-04-07 20:10:31 发布

IT架构体系

最新推荐文章于 2020-04-07 20:10:31 发布

阅读量3k

点赞数 4

分类专栏： JQuery

本文链接：https://blog.csdn.net/lishehe/article/details/9973459

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

记得以前在浏览了大多数网站的上面发现很多下拉的导航栏，觉得特别好玩，毕竟咱们是学习编程的嘛，对这下拉的效果还是挺感兴趣的，这种淡入淡出，随着鼠标移动的位置不同、有无等而出现不同的效果，给用户以神美感。

正好学习到有这块的知识，自己就跟着老师的视频真正的尝试了一下，效果出来了，真的很兴奋哈。

实现的基本效果图

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 class="main">
                <a href="#">文件</a>
                        <ul>
                        <li><a href="#">新建</a></li>
                        <li><a href="#">保存</a></li>
                        </ul>
                </li>
                <li class="main"><a href="#">编辑</a>
                <ul>
                        <li><a href="#">复制</a></li>
                        <li><a href="#">查找</a></li>
                        </ul>
                </li>
                <li class="main"><a href="#">帮助</a>
                <ul>
                        <li><a href="#">检查更新</a></li>
                        <li><a href="#">版本说明</a></li>
                        </ul>
                </li>
        </ul>
			</li>
		</ul>
    <p>分割线————————分割线</p>
		<ul>
			               <li class="hmain">
                <a href="#">文件</a>
                        <ul>
                        <li><a href="#">新建</a></li>
                        <li><a href="#">保存</a></li>
                        </ul>
                </li>
                <li class="hmain"><a href="#">编辑</a>
                <ul>
                        <li><a href="#">复制</a></li>
                        <li><a href="#">查找</a></li>
                        </ul>
                </li>
                <li class="hmain"><a href="#">帮助</a>
                <ul>
                        <li><a href="#">检查更新</a></li>
                        <li><a href="#">版本说明</a></li>
                        </ul>
                </li>
		</ul>
	</body>
</html>

JS代码：还需要额外引用jquery.js文件

menu.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");
		}
		*/
		//ulNode.show("slow");//normal fast
		//ulNode.hide();
		//ulNode.toggle();
		//
		//ulNode.slideDown("slow");
		//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')");
		}
	}
}

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;
}

效果图：

总结

这种效果在大量的网站上使用，咱们深入了解这个框架之后，我们后面的学习也会轻松很多哈，知识都是大同小异，需要我们不断的来回的使用，才能理解的深刻啊。小知识大思维，我们要打好基础，后面的学习应该就游刃有余了。

IT架构体系

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
25
评论
JQuery实战总结二横向纵向菜单下拉效果图

记得以前在浏览了大多数网站的上面发现很多下拉的导航栏，觉得特别好玩，毕竟咱们是学习编程的嘛，对这下拉的效果还是挺感兴趣的，这种淡入淡出，随着鼠标移动的位置不同、有无等而出现不同的效果，给用户以神美感。正好学习到有这块的知识，自己就跟着老师的视频真正的尝试了一下，效果出来了，真的很兴奋哈。
复制链接

扫一扫