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 相关文章推荐
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 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新手上路(六)
2006/10/09 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
python 中文字符串的处理实现代码
2009/10/25 Python
python 文件和路径操作函数小结
2009/11/23 Python
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
Python简单的制作图片验证码实例
2017/05/31 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
对Python信号处理模块signal详解
2019/01/09 Python
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
计算机专业推荐信范文
2013/11/27 职场文书
设计总监岗位职责
2013/12/07 职场文书
《问银河》教学反思
2014/02/19 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
政工例会汇报材料
2014/08/26 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
单位介绍信格式
2015/01/31 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang
Python Flask实现进度条
2022/05/11 Python