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 相关文章推荐
自己做的模拟模态对话框实现代码
May 23 Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
JavaScript动态数量的文件上传控件
Nov 18 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
详解使用WebPack搭建React开发环境
Aug 06 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
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
JavaScript将取代AppleScript?
2014/09/18 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
python使用心得之获得github代码库列表
2014/06/25 Python
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
对于Python中RawString的理解介绍
2016/07/07 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
python连接mysql有哪些方法
2020/06/24 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
基于python实现坦克大战游戏
2020/10/27 Python
python搜索算法原理及实例讲解
2020/11/18 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
母亲节感恩活动记录
2014/03/16 职场文书
自主招生学校推荐信
2014/09/26 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript