jQuery 渐变下拉菜单


Posted in Javascript onDecember 15, 2009

这里主要是利目标在鼠标经过时(.hover())利用slideToggle() 、slideUp()来显示原来隐藏着的内容:

$(function(){ 
$(".dropdown").hover( 
function(){ $("li ul").slideToggle(800);}, 
function(){$("li ul").slideUp(1000)} 
) 
})

jQuery 渐变下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery 渐变下来效果</title> <style type="text/css"> 
a{text-decoration:none;color:#333;} 
a:hover{color:#f33;} 
a.gr{color:#227CE8;} 
a.xg{color:#f30;} 
a.zx{color:#690;} 
a.yd{color:#f00;} 
a.more-rss{color:#f60;} 
a img{border:none;} 
a.rssfeed{display:block;height:60px;width:160px;cursor:pointer;} 
.wrapper{width:700px;margin:0 auto;height:460px;position:relative;} 
.wrapper small{position:absolute;bottom:0;left:0;border-top:1px dotted #b3b3b3;display:block;width:700px;line-height:30px;text-align:right;} 
ul li{list-style:none;} 
ul li.dropdown{position:relative;width:160px;} 
ul li.dropdown ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:160px;padding:15px 15px 20px;} 
ul li.dropdown ul li{padding:5px 0;border-bottom:1px dotted #ddd;} 
</style> 
</head> 
<body> 
<div class="wrapper"> 
    <h1><a href="">jQuery 渐变下拉菜单</a></h1> 
<p>使用slideToggle和slideUp来实现.当然,也可以使用hide/show, fadeIn/fadeOut等来实现,只是效果不同,实现的方法还是相同的.需要注意的是,要给.dropdown加上position:relative;防止闪烁.</p> 
<ul class="fir"> 
<li class="dropdown"> 
<a class="rssfeed"><img src="feedme.png" alt="feedme" /></a> 
<ul> 
<li><a href="#" rel="RSS"><img src="rss.gif" alt="RSS Feed" /></a></li> 
<li><a href="#" class="xg" rel="nofollow">鲜果订阅</a></li> 
<li><a href="#" class="gr" rel="nofollow">Google订阅</a></li> 
<li><a href="#" class="zx" rel="nofollow">抓虾订阅</a></li> 
<li><a href="#" class="yd" rel="nofollow">有道订阅</a></li> 
<li><a href="#" class="more-rss" rel="RSS">更多方式 »</a></li> 
</ul> 
</li> 
</ul> 
</div> 
<script language="javascript" type="text/javascript" src="jquery.min.js"></script> 
<script language="javascript" type="text/javascript"> 
$(function(){ 
    $(".fir .dropdown").hover( 
        function(){ 
            $("li ul").slideToggle(800); 
        },function(){ 
            $("li ul").slideUp(1000) 
        }) 
}) 
</script> 
</body> 
</html>

测试代码打包下载
Javascript 相关文章推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
jquery动态添加option示例
Dec 30 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
VUE安装使用教程详解
Jun 03 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
多浏览器兼容的获取元素和鼠标的位置的js代码
Dec 15 #Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
Dec 15 #Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 #Javascript
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 #Javascript
Javascript attachEvent传递参数的办法
Dec 14 #Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 #Javascript
javascript document.execCommand() 常用解析
Dec 14 #Javascript
You might like
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
PHP可变函数的使用详解
2013/06/14 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
详解Django中的过滤器
2015/07/16 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
时尚休闲吧创业计划书
2014/01/25 职场文书
竞争上岗实施方案
2014/03/21 职场文书
产品质量承诺书
2014/03/27 职场文书
学校运动会霸气口号
2014/06/07 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
生日寿星公答谢词
2015/09/29 职场文书
数学复习课教学反思
2016/02/18 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python