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 getElementsByTagName
Jan 31 Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
AngularJS基础 ng-submit 指令简单示例
Aug 03 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
vue实现pdf文档在线预览功能
Nov 26 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 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中用foreach来操作数组的代码
2011/07/17 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
Python urlopen 使用小示例
2008/09/06 Python
Python中zip()函数用法实例教程
2014/07/31 Python
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
python实现聊天小程序
2018/03/13 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
python内存动态分配过程详解
2019/07/15 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
深入理解Python 多线程
2020/06/16 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
动物科学专业毕业生的自我评价
2013/11/29 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
学生党员公开承诺书
2014/05/28 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL