jQuery实现的纵向下拉菜单实例详解【附demo源码下载】


Posted in Javascript onJuly 09, 2016

本文实例讲述了jQuery实现的纵向下拉菜单。分享给大家供大家参考,具体如下:

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

第一步,我们来编写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="#">菜单项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>

我们来看一下运行效果:

jQuery实现的纵向下拉菜单实例详解【附demo源码下载】

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

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;
}

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

jQuery实现的纵向下拉菜单实例详解【附demo源码下载】

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

$(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();
 });
})

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

jQuery实现的纵向下拉菜单实例详解【附demo源码下载】

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

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
Jquery替换已存在于element上的event的方法
Mar 09 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
EasyUI Pagination 分页的两种做法小结
Jul 09 #Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 #Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 #Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 #Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 #Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 #Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 #Javascript
You might like
PHP静态类
2006/11/25 PHP
如何隐藏你的.php文件
2007/01/04 PHP
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
php中的比较运算符详解
2013/10/28 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
Python如何用filter函数筛选数据
2020/03/05 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
什么是属性访问器
2015/10/26 面试题
售后服务承诺函格式
2015/01/21 职场文书
房地产项目合作意向书
2015/05/08 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
python实现语音常用度量方法的代码详解
2021/05/25 Python
pytorch fine-tune 预训练的模型操作
2021/06/03 Python