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. xml 制作 RSS 订阅源

    首先制作一个 RSS 模板,模板的文件名是 feed.xml,代码如下: <?xml version="1.0" encoding="utf-8"?> ...

  2. P2P技术详解(三)：P2P技术之STUN、TURN、ICE详解

    1.内容概述 在现实Internet网络环境中,大多数计算机主机都位于防火墙或NAT之后,只有少部分主机能够直接接入Internet.很多时候,我们希望网络中的两台主机能够直接进行通信,即所谓的P2P ...

  3. c语言程序设计第四次作业——顺序结构

    (一)改错题 输出三角形的面积和周长,输入三角形的三条边a.b.c,如果能构成一个三角形,输出面积area和周长perimeter(保留2位小数):否则,输出"These sides do ...

  4. Vue2学习（2）

    按键修饰符 还可以自定义按键修饰符别名,通过全局 config.keyCodes 对象设置: // 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112 ...

  5. ArrayList add方法的实现之扩容

    初探ArrayList的1.5倍扩容 add方法是通过在list的尾部追加元素的方法,添加数据的. 其中,调用了一个叫ensureCapacityInternal方法,实现list的容量换算等: 注意 ...

  6. break 与 continue

    1.break ①只有一层循环时,作用是跳出循环语句,执行后面的代码. ②break存在于循环嵌套的内层循环时,只能跳出内层循环,如果想要跳出外层循环,需要对外层循环添加标记. 2.continue ...

  7. SQL之DISTINCT

    警告:不能部分使用DISTINCT. DISTINCT关键字作用于所有的列,不仅仅是跟在其后的那一列.例如,你指定SELECT DISTINCT vend_id, prod_price,除非指定的两列 ...

  8. vue+cordova 构建hybrid app

    配了一个 vue + cordova + ionicCli 的 项目 支持 ionic 的脚手架命令 支持 cordova 的 插件 安装使用 支持 webpack 的自动构建 vue 安装了 vue ...

  9. VueJs(3)---V-指令

    VueJs(3)---V-指令(1) 一.语法 v- 指令是带有v-的特殊属性 v-if 条件渲染 v-show v-else (必须在v-if/v-else-if/v-show指令后) v-else ...

  10. github windows pycharm 设置

    Window 上pycharm数据上传到github 在window上操作 1),安装git(百度) 进入git , bin目录执行 git-bash.exe 1)  gengyantao@DESKT ...