【js与jquery】导航下拉菜单效果
2019独角兽企业重金招聘Python工程师标准>>>
1.效果如图所示:
2.html代码:
[php] view plaincopy
<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代码:
[php] view plaincopy
//导航效果(兼容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");
});
})
转载于:https://my.oschina.net/yonghan/blog/524039
【js与jquery】导航下拉菜单效果相关推荐
- 利用jQuery制作的导航下拉菜单效果
利用jQuery制作的导航下拉菜单效果,其实利用css同样可以实现导航下拉菜单效果,但自从学习了jQuery后,感觉还是jQuery做起来效果更好.jQuery制作导航下拉菜单,需要用到jQuery方 ...
- 用jQuery实现下拉菜单效果
用jQuery实现下拉菜单效果 下拉菜单效果展示 代码 <!DOCTYPE html> <html><head>`在这里插入代码片`<meta charset ...
- jquery实现二级导航下拉菜单效果实例
大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用.前面两篇博文分别是用CSS样式和JS实现的,那么这篇就用jQuery来实现二级下拉式菜单. 使用JQuery实现需要用到的知识有: ...
- jquery实现二级导航下拉菜单效果
大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用.前面两篇博文分别是用CSS样式和JS实现的,那么这篇就用jQuery来实现二级下拉式菜单. 使用JQuery实现需要用到的知识有: ...
- jquery 下拉菜单 html,用jquery实现下拉菜单效果的代码
效果如下: 这是菜单的内容,用ul标签实现菜单: 菜单一 子菜单1 子菜单2 子菜单7 子菜单3 菜单二 子菜单4 子菜单5 子菜单6 这是CSS控制代码: ul,ol,li{list-style:n ...
- java用下拉框实现出生日期_纯JS实现出生日期[年月日]下拉菜单效果
在制作网页时,可能需要给用户提供注册帐号页面,用户注册 设计很多信息,其中就有 关于出生日期的,出于用户体验,不想让用户手动输入,而HTML5的date,目前很多浏览器支持的并不是很好,所以就可以用J ...
- php表单设置出生日期,纯JS实现出生日期[年月日]下拉菜单效果_茜茜_前端开发者...
在制作网页时,可能需要给用户提供注册帐号页面,用户注册 设计很多信息,其中就有 关于出生日期的,出于用户体验,不想让用户手动输入,而HTML5的date,目前很多浏览器支持的并不是很好,所以就可以用 ...
- jquery实现导航下拉菜单
jquery实现导航下拉菜单 原生的: 用layui 原生的: html <div id="my_menu" class="sdmenu">< ...
- 动态二级下拉菜单html,js实现简洁大方的二级下拉菜单效果代码
本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效 ...
- 无限级导航PHP,jQuery多级无限级导航下拉菜单代码
jQuery多级无限级导航下拉菜单代码 js代码 $(document).ready(function() { $("ul.nav li").hover(function(){ $ ...
最新文章
- guid linux 识别的分区表_Linux系统MBR和GPT分区的区别介绍
- optee3.14.0 qemu_v8的环境搭建篇
- Python 爬虫没有思路?可以看看这篇文章
- 详解Python生成器函数和生成器对象的原理和用法
- Python:IPython性能度量
- dto转化 vo_微服务篇-DTO、VO快速转换解决方案
- WEB打印控件Lodop的使用
- 【工业设计公司】产品外观设计的重要性
- MR21修改物料标准价
- 简约生活的72条观念
- ESP8266安卓TCP客户端开发(含全部源码)
- saltstack学习视频—老男孩—超详细—网盘下载
- 如何高效的搜索github上面的资源
- 为什么“前Google工程师”会“感觉UML没啥用”?
- Android Socket通信read阻塞解决办法
- flink sql 连接kafka avro序列化异常 Failed to deserialize Avro record ArrayIndexOutOfBoundsException
- c语言能做安卓游戏吗,c语言能编写手机游戏吗?
- html轮播台袋效果,使用html+js+css 实现页面轮播图效果(实例讲解)
- 电涡流传感器330103-00-05-10-02-00本特利
- Spring Cloud Alibaba (三)Sentinel 简单介绍和使用
热门文章
- collections的defaultdict使用
- DLL load failed: 找不到指定模块\Failed to load the native TensorFlow runtime解决方法
- linux/windows双系统安装、启动顺序设置及重新设置
- mysql金钱默认字段格式化_在SQL数据库中,设置了一个字段的类型为money,但是money类型数据保留的是四位小数,如何设置为两位小数?...
- vite 打包页面空白
- 蓝桥杯2015年第六届C/C++省赛A组第一题-方程整数解
- L1-027 出租 (20 分)—团体程序设计天梯赛
- shell脚本编程学习(一)
- 虚拟机ubuntu系统硬盘扩容
- python - 日期处理模块