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

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

实现的基本效果图

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

效果图:

总结

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

JQuery实战总结二 横向纵向菜单下拉效果图的更多相关文章

  1. JS练习题(左侧菜单下拉+好友选中)

    题一.左侧菜单下拉 做题思路:先做菜单和子菜单,把子菜单默认隐藏.再用JS调样式. <style type="text/css"> *{ margin:0px auto ...

  2. JS之document例题讲解1(两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结)

    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...

  3. 9月23日JavaScript作业----子菜单下拉

    例题一.子菜单下拉 <style type="text/css"> *{ margin:0px auto; padding:0px} #menu{ width:700p ...

  4. 在Mockplus中,如何做鼠标悬停时菜单下拉的效果?

    了解Mockplus的用户会知道,该原型工具目前并不直接支持鼠标悬停功能.但我经过尝试,发现想用它实现一个鼠标悬停事件并不是什么难事,比如网页设计中很常见的鼠标悬停时菜单下拉的效果,只要换个思路,利用 ...

  5. jQuery制作简洁的多级联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  6. jQuery点击页面其他部分隐藏下拉菜单

    一.开发小要点 web页面中,我们一般不用select.option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面 ...

  7. jQuery打造智能提示插件二(可编辑下拉框)

    在上一篇 jQuery打造智能提示插件 上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果 下拉按钮素材: js封装,注意红色部分为BUG修复,然后传入boxwidth不带px: /* /// ...

  8. Flutter交互实战-即刻App探索页下拉&拖拽效果

    前言 Flutter最近比较热门,但是Flutter成体系的文章并不多,前期避免不了踩坑:我这篇文章主要介绍如何使用Flutter实现一个比较复杂的手势交互,顺便分享一下我在使用Flutter过程中遇 ...

  9. JQuery 简单的文字超出部分隐藏下拉显示

    HTML代码: <body> <div class="txt_bos"><!--在每一个放置文字的class外面包一个div,以便设置动画样式用,同样 ...

随机推荐

  1. Json在PHP与JS之间传输

    1. JS-->PHP a). JS create Json <script> $(document).ready(function(){ /*--JS create Json--* ...

  2. RobotFrameWork webservice soap接口测试 (二)

    上一篇提到做soap接口测试自己简单的写了个py,然后就简单的实现了个客户端能对远程接口进行调用,对返回的数据进行解析,可后面想着也觉得不对劲,soap协议虽说不像http协议那么普及,但是现在很多公 ...

  3. FIFO跨时钟域读写

    今天面试,要走时问了我一个问题:如果两个时钟一个时钟慢一个时钟快,来读写FIFO,其中读出的数据是 连续的一段一段的. 图1 图1为写时序控制,可以看出数据是两个时钟周期的长度,当然实际中可以是任意周 ...

  4. spark单机模式简单搭建

    待安装列表hadoophivescalaspark一.环境变量配置:~/.bash_profilePATH=$PATH:$HOME/bin export PATH JAVA_HOME=/usr/loc ...

  5. 分享:Perl打开与读取文件的方法

    在Perl中可以用open或者sysopen函数来打开文件进行操作,这两个函数都需要通过一个文件句柄(即文件指针)来对文件进行读写定位等操作. Perl打开与读取文件的方法,供大家学习参考.本文转自: ...

  6. dubbo No provider available for the service com.alibaba.dubbo.monitor.MonitorService from registry

    No provider available for the service com.alibaba.dubbo.monitor.MonitorService from registry http:// ...

  7. HDU 2612 -Find a way (注重细节BFS)

    主题链接:Find a Way 题目不难,前几天做,当时准备写双向BFS的,后来处理细节上出了点问题,赶上点事搁置了.今天晚上重写的,没用双向,用了两次BFS搜索,和双向BFS 道理差点儿相同.仅仅是 ...

  8. 7.20.01 java格式化输出 printf 例子

    java格式化输出 printf 例子 importjava.util.Date; publicclassPrintf { publicstaticvoidmain(String[] args) { ...

  9. 高德地图测两点距离android比较精确的

    /////参考资料:高德官方:[http://lbs.amap.com/api/android-location-sdk/guide/android-location/getlocation] 主要三 ...

  10. 我踩过的Alwayson的坑!

    最近被sql server Alwayson高可用组和读写分离,弄得神魂颠倒,身心俱疲.遇到了下面一些问题,提醒自己也给后来人做些记录. EntityFramework支不支持Alwayson? 起因 ...