jquery库给我们带来了许多便利，不愧是轻量级的DOM框架，在前面的博文中小编分别对jquery的基础知识以及jquery的一些小demo有一系列的简单介绍，期待各位小伙伴的指导。使用jquery实现一个简单的横纵向菜单，小编相信其他小伙伴都有很多的实现方法，小编今天自己使用JQuery写了一个横纵向菜单，用博文跟小伙伴分享一下小编实现横纵向菜单的实现心得。

当我们浏览网页和使用word编辑一下文字的时候，我们都能看见横向下拉的身影，有了横向菜单，我们能对整个界面进行更好的布局，达到我们想要的效果，那么这些横向菜单式如何用代码实现的，当我们浏览或使用的时候她又是如何呈现在我们面前的，学习了JQuery之后，小编渐渐看到她美丽的容颜，接下来，小编主要讲解如何通过jquery实现纵向下拉菜单。

第一步，我们来编写html的代码，如下所示：

<span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;"><!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="#">菜单项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>
	</body>
	</html>
	</span></span></span>

我们来看一下运行效果：

上面的实现效果已经初步具有了纵向菜单的模型，但是似乎有不完美的地方，主菜单的前面有黑色的小圆点，子菜单前面有白色的小圆点，也没有立体的效果，不用担心css可以帮助我们解决上述的问题，接着，编写css的代码，如下所示：

<span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;">ul,li{
    /*清除ul和li上默认的小圆点*/
    list-style:none;
}
ul{
   /*清除子菜单的缩进值*/
   padding:0;
   margin:0;
}
.main{
    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{
    color:white;
	background-image:url(../images/collapsed.gif);
	background-repeat:no-repeat;
	background-position:3px center;
}
.main li a{
     color:black;
	 background-image:none;
}
.main ul{
    display:none;
}</span></span></span>

添加了css的代码，在显示的时候会有怎么样的惊喜带给我们呢？



       上图的显示效果已经就更为接近我们的想好实现的效果了，但是这个还是不可以进行点击的，所以我们还需要编写js的代码，相应的，在js中我们也要建立两个文件，一个jquery一个menu，鉴于jquery的代码较多，所以小编已经上传相关资源，有需要的小伙伴可以到该链接下载，接着，我们来编写menu的代码，来给整理页面添加行为能力，代码如下：

<span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;">$(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
		//unlNode.hide();
		//ulNode.toggle();
		//
		//ulNode.slideDown("slow");
		//ulNode.slideUP;
		ulNode.sildeToggle();

   });
})</span></span></span>

添加了js的代码，现在实现的效果是不是和我们想象的一样呢，如下图所示：

以上就是小编实现的纵向下拉菜单的全部过程，既然可以实现纵向下拉菜单，那么横向下拉菜单又该如何实现呢，更纵向菜单的实现过程有哪些不一样的地方nie，这个过程才是我们成长的过程，在这里横向菜单小编就不一一介绍了，以下是实现横纵下拉菜单的代码，点击下载，有需要的小伙伴可以down下来，自己研究。

小编寄语：该博文小编主要简单的介绍了小编如何实现纵向下拉菜单的实现心得，简单的讲解了一下该校demo的实现过程，小编在博文中实现的是如何实现纵向下拉菜单的效果，小伙伴可以研究研究如何实现横向下拉菜单，BS总结，未完待续......

JQuery纵向下拉菜单实现心得的更多相关文章

  1. jQuery水平下拉菜单实现

    <!DOCTYPE html> <html>    <head>       <title>jQuery水平下拉菜单实现</title>   ...

  2. jquery 实现下拉菜单

    Jquery 是一个轻量的框架,个人认为非常好用,今天就写一个非常简单的例子,实现下拉菜单功能: 首先肯定要在页面引用jquery.js  版本不限 : 接下来把=================== ...

  3. 第72天：jQuery实现下拉菜单

    jQuery实现下拉菜单 一.居中 1.块元素居中:给块元素本身设置:margin:0 auto;,块元素必须设置宽度 2.行内块元素居中:给元素父级设置text-algin:center; < ...

  4. jquery带下拉菜单和焦点图

    jQuery,下拉菜单,二级菜单,索引按钮,焦点图代码,jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码. JQuery特效代码来源:http://www.huiy ...

  5. jQuery美化下拉菜单插件dropkick

    dropkick是一款基于jquery库的美化下拉框下拉菜单的插件,它通过定制HTML插入可使丑陋无聊的<select>下拉列表变得美丽. name属性是唯一一个必需的填写的,不过你也应该 ...

  6. jQuery EasyUI 下拉菜单获取日期，最高年份为当前年份，最低年份为当前年份向前推10年

    http://blog.csdn.net/wangjingjing1014/article/details/16885341 <head><meta http-equiv=" ...

  7. jquery设置下拉菜单

    jQuery代码 1,引用jQuery库 2,show方法 3,hide方法 <script type="text/javascript"> $function(){ ...

  8. jquery多级下拉菜单

    var menu = new Click('#menu',{target:'p',parent:'li',contr:'ul',way:0}); /* 参数说明: target : 点击事件发生在该元 ...

  9. jquery实现下拉菜单

    需要实现的效果如图: <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...

随机推荐

  1. 2017-9-19 c语言预备作业

    题目一: (1)我对邹欣老师博客内容的看法 针对邹欣老师的第一种看法,也就是文中所谈的春蚕与园丁的例子.我认为在大学之前的阶段,师生关系可以如此比喻,因为在中学阶段教师与学生的关系,更多地是一个知识的 ...

  2. DS4700电池更换步骤

    DS4700电池更换步骤: 在A控制器里操作(带电热插拔控制器)对逻辑盘进行切换: (需要先将A控下挂的硬盘手工切换到B控上.然后对A控进行电池更换,更换完成后再将原A控下挂硬盘切回) 如下详细步骤: ...

  3. SQl语句中使用占位符的优点

    1.增加SQL代码可读性2.占位符可以预先编译,提高执行效率3.防止SQL注入4用占位符的目的是绑定变量,这样可以减少数据SQL的硬解析,所以执行效率会提高不少 绑定变量是Oracle解决硬解析的首要 ...

  4. MockHttpServletRequestBuilder中content和param的区别

    结论: Mock将URL的参数和通过使用param添加的参数添加到request中的parameter中(url参数) 而将content内容.类型并没有进行解析,直接添加到request的conte ...

  5. 反射实现java深度克隆

    一.克隆 有时想得到对象的一个复制品,该复制品的实体是原对象实体的克隆.复制品实体的变化不会引起原对象实体发生变化,这样的复制品称为原对象实体的克隆对象或简称克隆. 1.浅复制(浅克隆) 概念:被复制 ...

  6. 修复 Ubuntu 14.04 的系统设置残缺问题

    sudo apt-get install ubuntu-desktop

  7. vim 基本命令入门

    简介 vim是Linux 系统下类似于Windows的记事本的编辑器. vim 中经常使用的三种模式 一般模式:浏览文件内容. 插入模式:编辑文件内容. 底行模式:进行保存编辑内容,退出等操作. 基本 ...

  8. Python中的数据类型

    计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频.视频.网页等各种各样的数据,不同的数据,需要定义不同的数 ...

  9. 用go实现常用算法与数据结构——队列(queue)

    queue 简介 队列是一种非常常见的数据结构,日常生活中也能经常看到.一个典型的队列如下图(图片来自 segmentfault): 可以看出队列和我们日常生活中排队是基本一致的.都遵循 FIFO(F ...

  10. iOS进阶之页面性能优化

    转载:http://www.jianshu.com/p/1b5cbf155b31 前言 在软件开发领域里经常能听到这样一句话,"过早的优化是万恶之源",不要过早优化或者过度优化.我 ...