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 相关文章推荐
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
JavaScript的==运算详解
Jul 20 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
表单中单选框添加选项和移除选项
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
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
利用php生成验证码
2017/02/23 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
javascript 打印内容方法小结
2009/11/04 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
python实现人人网登录示例分享
2014/01/19 Python
浅析Python中的for 循环
2016/06/09 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
python机器学习实现决策树
2019/11/11 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
Pytorch之finetune使用详解
2020/01/18 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
美发活动策划书
2014/01/14 职场文书
材料加工工程求职信
2014/02/19 职场文书
写给老婆的检讨书
2014/02/21 职场文书
大学军训感言1500字
2014/03/09 职场文书
亚运会口号
2014/06/20 职场文书
银行员工考核评语
2014/12/31 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript