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的一些常用方法小结
Jun 29 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
js数组实现权重概率分配
Sep 12 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
详解JavaScript 高阶函数
Sep 14 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读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
JavaScript Promise启示录
2014/08/12 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
AngularJs 终极购物车(实例讲解)
2017/11/08 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
如何开启linux的ssh服务
2015/02/14 面试题
新年团拜会主持词
2014/04/02 职场文书
环境保护标语
2014/06/20 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
倡议书范文大全
2015/04/28 职场文书
春节慰问简报
2015/07/21 职场文书
结婚主持人致辞
2015/07/28 职场文书
python实现会员信息管理系统(List)
2022/03/18 Python
Oracle中日期的使用方法实例
2022/07/07 Oracle