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. （转）FIDDER教程

    Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大 ...

  2. Python中生成器和迭代器的功能介绍

    生成器和迭代器的功能介绍 1. 生成器(generator) 1. 赋值生成器 1. 创建 方法:x = (variable for variable in iterable) 例如:x = (i f ...

  3. TensorFlow Serving-TensorFlow 服务

    TensorFlow服务是一个用于服务机器学习模型的开源软件库.它处理机器学习的推断方面,在培训和管理他们的生命周期后采取模型,通过高性能,引用计数的查找表为客户端提供版本化访问. 可以同时提供多个模 ...

  4. SQL 收缩数据库日志的几种办法 (2005与2008 略有区别）

    在SQL Server 2000/2005中可以快速压缩日志log文件,通过SQL, 方法一: ---DBTEST 为数据库名,顺序最好别乱.注意:要先截断再清空,最后收缩! backup log D ...

  5. SSM项目搭建之配置文件

    1.1  pom文件配置 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http:// ...

  6. drools 手动创建kmoudle.xml文件

    @Test public void test() { KieServices kieServices = KieServices.Factory.get(); KieResources resourc ...

  7. JMeter如何和Charles进行接口测试

    什么是接口测试,接口测试到底如何开展,我相信任何一个软件测试人员都会有这样的疑问, 这里我以接口测试自动化平台的登录接口进行讲解. 一.什么是接口测试? 接口测试是测试系统组件间接口的一种测试.接口测 ...

  8. Python中strip()、lstrip()、rstrip()用法详解

    Python中有三个去除头尾字符.空白符的函数,它们依次为: strip: 用来去除头尾字符.空白符(包括\n.\r.\t.' ',即:换行.回车.制表符.空格)lstrip:用来去除开头字符.空白符 ...

  9. Spring Boot+maven打war包

    存在一个坑: 官网文档 指出以下前3步做法,但是这样只可以打出可运行的jar包,要打出war包还要在文档后面的链接跳到另一个页面,才能找到第四步的做法,也就是最终能够打出war包,可能有些朋友有些粗心 ...

  10. Gradle 1.12用户指南翻译——第五十章. 依赖管理

    本文由CSDN博客貌似掉线翻译,其他章节的翻译请参见:http://blog.csdn.net/column/details/gradle-translation.html翻译项目请关注Github上 ...