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

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

实现的基本效果图

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. lightinthebox头部分类菜单下拉导航，使鼠标移到See All Categories就显示下拉菜单

    lightinthebox头部分类菜单下拉导航,使鼠标移到See All Categories就显示下拉菜单 打开includes\templates\lightinthebox\common\tpl ...

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

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

  8. jQuery打造智能提示插件二（可编辑下拉框）

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

  9. css 导航菜单+下拉菜单

    一.导航菜单 1.横向导航 代码如下: <!doctype html> <html> <head> <meta charset="utf-8&quo ...

随机推荐

  1. C# 定积分求周长&面积原理 代码实现

    前言: 前些日子,因为工作原因,接触到了求解曲线周长,真的是搞了很久,学生时代真的很简单,但是如今的我来说,忘记了....很多人跟我应该一样. 所以来巩固加强一下记忆.一开始的时候,求周长嘛,找公式呗 ...

  2. pandas小记：pandas高级功能

    http://blog.csdn.net/pipisorry/article/details/53486777 pandas高级功能:面板数据.字符串方法.分类.可视化. 面板数据 {pandas数据 ...

  3. 安卓高级 WebView的使用到 js交互

    我们先来学习 怎么使用再到用js和安卓源生方法交互 WebView简单使用 此部分转载并做了补充 原博客 原因:比较简单不是很想在写,我只要写js交互部分 WebView可以使得网页轻松的内嵌到app ...

  4. Android 5.0 调色 Palette调色功能

    Palette非常好用,也非常好玩. Palette的作用是从图像中提取突出的颜色,这样我们可以根据提取到的色值把它赋给Toolbar,标题,状态栏等,可以使我们的整个界面色调统一,效果非常好看. P ...

  5. Android的Intent机制详解

    Intent 是一个消息传递对象,您可以使用它从其他应用组件请求操作.尽管 Intent 可以通过多种方式促进组件之间的通信,但其 基本用例主要包括以下三个: 启动 Activity: Activit ...

  6. 一个整数数组，长度为n，将其分为m份，使各份的和相等，求m的最大值。

    比如{3,2,4,3,6} 可以分成 {3,2,4,3,6} m=1; {3,6}{2,4,3} m=2 {3,3}{2,4}{6} m=3 所以m的最大值为3. bool isShare(int* ...

  7. Spring常用配置(二)

    OK,上篇博客我们介绍了Spring中一些常见的配置,上篇博客中介绍到的都是非常常见的注解,但是在Spring框架中,常见的注解除了上篇博客提到的之外,还有许多其他的注解,只不过这些注解相对于上文提到 ...

  8. CentOS6.7下安装MySQL

    第一步:到MySQL官网上下载linux版本的MySQL rpm 安装包. 第二步: 将该压塑包解压后,有如下文件: 第三步:安装文件,我们需要安装的文件有 MySQL-server-5.6.26-1 ...

  9. 【SSH系列】---Hibernate的基本映射

    开篇前言       在前面的博文中,小编分别介绍了[SSH系列]-- hibernate基本原理&&入门demo,通过这篇博文,小伙伴们对hibernate已经有了基本的了解,以及h ...

  10. Android开发艺术探索笔记——第一章：Activity的生命周期和启动模式

    Android开发艺术探索笔记--第一章:Activity的生命周期和启动模式 怀着无比崇敬的心情翻开了这本书,路漫漫其修远兮,程序人生,为自己加油! 一.序 作为这本书的第一章,主席还是把Activ ...