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中var声明变量作用域的推断
Dec 16 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
Vue封装的组件全局注册并引用
Jul 24 Javascript
ES6函数实现排它两种写法解析
May 13 Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 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
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
JavaScript实现计数器基础方法
2017/10/10 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
Cpy和Python的效率对比
2015/03/20 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
店长职务说明书
2014/02/04 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
表扬稿格式范文
2015/01/16 职场文书
妇产科护理心得体会
2016/01/22 职场文书
护理培训心得体会
2016/01/22 职场文书
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
sass 常用备忘案例详解
2021/09/15 HTML / CSS
SpringBoot详解执行过程
2022/07/15 Java/Android