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 相关文章推荐
JavaScript 题型问答有答案参考
Feb 17 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
获取数组中最大最小值方法js代码(自写)
Aug 12 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
详解javascript void(0)
Jul 13 Javascript
多浏览器兼容的获取元素和鼠标的位置的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
单位速度在实战中的运用
2020/03/04 星际争霸
url decode problem 解决方法
2011/12/26 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
python中enumerate的用法实例解析
2014/08/18 Python
Python简单连接MongoDB数据库的方法
2016/03/15 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
美国校园市场:OCM
2017/06/08 全球购物
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
恶意软件的定义
2014/11/12 面试题
社团活动总结模板
2014/06/30 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
二审答辩状格式
2015/05/22 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
2016年公司新年寄语
2015/08/17 职场文书
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python
Windows7下FTP搭建图文教程
2022/08/05 Servers