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. bzoj4514

    4514: [Sdoi2016]数字配对 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1870  Solved: 712[Submit][Statu ...

  2. Python笔记（十一）：多线程

    (二)和(三)不感兴趣的可以跳过,这里参考了<深入理解计算机系统>第一章和<Python核心编程>第四章 (一)      多线程编程 一个程序包含多个子任务,并且子任务之间相 ...

  3. jenkins更新后出现JNLP-connect,JNLP2-connect警告

    在更新jenkins后出现提示 This Jenkins instance uses deprecated protocols: JNLP-connect,JNLP2-connect. It may ...

  4. Tomcat性能调优-JVM监控与调优

    参数设置 在Java虚拟机的参数中,有3种表示方法用"ps -ef |grep "java"命令,可以得到当前Java进程的所有启动参数和配置参数: 标准参数(-),所有 ...

  5. 函数的属性和方法之call、apply 及bind

    一.前言 ECMAScript中的函数是对象,因此函数也有属性和方法.每个函数都包含两个属性:length和prototype.每个函数也包含两个非继承来的方法:apply()和call(),还有一些 ...

  6. Linux服务器之间免密登录设置

    说明: A为linux服务器a B为linux服务器b 每台linux都有ssh的服务端和客户端,linux下的ssh命令就是一个客户端 我们常用ssh协议来进行登陆或者是文件的拷贝,都需要密码 A要 ...

  7. HTTP请求分析工具Fiddler

    主要用于分析http头信息和响应头信息,以及具体的post数据和响应数据,可以监测电脑上http请求.

  8. python基础学习（一）

    python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum),诞生时间1989年圣诞 一.变量的命令规则 1.变量只能由大小写字母.数字和下划线三部分组成,并且不能以数字 ...

  9. LintCode题解之比较字符串

    使用标记的方式,先遍历一遍B,出现一次就记录一次出现次数,然后遍历A,将记录的B的出现次数消去,最后检查一下记录的标记位是不是都消去了,总共需要检查三次,即进行三次O(n)的遍历. 然后总结出规律如果 ...

  10. Node.js 加密

    稳定性: 2 - 不稳定; 正在讨论未来版本的 API 改进,会尽量减少重大变化.详见后文. 使用 require('crypto') 来访问这个模块. 加密模块提供了 HTTP 或 HTTPS 连接 ...