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 相关文章推荐
用JavaScript和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
巧用canvas
Jan 21 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
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
简单易用的计数器(数据库)
2006/10/09 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
Javascript MD4
2006/12/20 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
初步讲解Python中的元组概念
2015/05/21 Python
python用户管理系统
2018/03/13 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
Python处理session的方法整理
2019/08/29 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
企业行政文员岗位职责
2013/12/03 职场文书
《社戏》教学反思
2014/04/15 职场文书
新文化运动的口号
2014/06/21 职场文书
六查六看心得体会
2014/10/14 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
golang中的并发和并行
2021/05/08 Golang
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python
python playwright之元素定位示例详解
2022/07/23 Python