jQuery实现的导航下拉菜单效果


Posted in Javascript onJuly 04, 2016

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

1.效果如图所示:

jQuery实现的导航下拉菜单效果

2.html代码:

<div id="navigation">
 <ul>
   <li><a href="#">首 页</a></li>
   <li><a href="#">衬 衫</a>
    <ul>
      <li><a href="#">短袖衬衫</a></li>
      <li><a href="#">长袖衬衫</a></li>
      <li><a href="#">无袖衬衫</a></li>
    </ul>
  </li>
  <li><a href="#">卫 衣</a>
    <ul>
      <li><a href="#">开襟卫衣</a></li>
      <li><a href="#">套头卫衣</a></li>
    </ul>
   </li>
  <li><a href="#">裤 子</a>
    <ul>
      <li><a href="#">休闲裤</a></li>
      <li><a href="#">卡其裤</a></li>
      <li><a href="#">牛仔裤</a></li>
      <li><a href="#">短裤</a></li>
    </ul>
   </li>
   <li><a href="#">联系我们</a></li>
 </ul>
</div>

3.jQuery代码:

//导航效果(兼容IE6)
/*
1.使用$("#navigation ul li:has(ul)")函数来选择含有<ul>元素的<li>元素,然后为它们添加hover事件,
2.在hover事件的第一个函数内,使用$(this).children("ul")找到<li>元素内部的<ul>元素,然后用stop(true,true)语句使导航向下扩展
3.在hover事件的第二个函数内,用stop(true,true).slideUp("fast")语句使导航向上隐藏
4.在两个动画效果之前都添加了stop(true,true)方法,这样做的好处是能把为执行完的动画队列清空,并且将正在执行的动画跳转到末状态
*/
$(function(){
  $("#navigation ul li:has(ul)").hover(function(){
   $(this).children("ul").stop(true,true).slideDown(400);
  },function(){
   $(this).children("ul").stop(true,true).slideUp("fast");
  });
})

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

Javascript 相关文章推荐
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
javascript实现前端成语点击验证
Jun 24 Javascript
表单中单选框添加选项和移除选项
Jul 04 #Javascript
jQuery实现简单倒计时功能的方法
Jul 04 #Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 #Javascript
JavaScript 节流函数 Throttle 详解
Jul 04 #Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 #Javascript
实用jquery操作表单元素的简单代码
Jul 04 #Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 #Javascript
You might like
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
PHP 各种排序算法实现代码
2009/08/20 PHP
php继承的一个应用
2011/09/06 PHP
php session的应用详细介绍
2017/03/22 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
jQuery截取指定长度字符串代码
2014/08/21 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
2016/07/20 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
python里大整数相乘相关技巧指南
2014/09/12 Python
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
python 简单的多线程链接实现代码
2016/08/28 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
如何基于python操作excel并获取内容
2019/12/24 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
精细化工应届生求职信
2013/11/17 职场文书
韩国商务邀请函
2014/01/14 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
体育教师求职信
2014/05/24 职场文书
辞职信的写法
2015/02/27 职场文书
事业单位聘任报告
2015/03/02 职场文书
给校长的建议书范文
2015/09/14 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL