jQuery 渐变下拉菜单

 更新时间:2009年12月15日 18:44:25   作者:   我要评论
利用jQuery来实现,其实就几行代码的事。即便如此,由于js语言的思维方式,还是一直没有把握好,加上一个css的问题,导致弄了好久才出来效果。
这里主要是利目标在鼠标经过时(.hover())利用slideToggle() 、slideUp()来显示原来隐藏着的内容:
复制代码 代码如下:

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


复制代码 代码如下:

<!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>

测试代码打包下载

相关文章

  • jquery用get实现ajax在ie里面刷新不进入后台解决方法

    jquery用get实现ajax在ie里面刷新不进入后台解决方法

    jquery用get实现ajax在ie里面刷新不进入后台的情况想必大家都有遇到过吧,下面与大家分享下具体的解决方法,希望对大家解决问题有所帮助
    2013-08-08
  • jquery左边浮动到一定位置时显示返回顶部按钮

    jquery左边浮动到一定位置时显示返回顶部按钮

    这篇文章主要介绍通过jquery实现左边浮动到一定位置时显示返回顶部按钮的效果,需要的朋友可以参考下
    2014-06-06
  • jquery仿ps颜色拾取功能

    jquery仿ps颜色拾取功能

    本文主要介绍jquery仿ps颜色拾取功能的实例,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • jquery UI实现autocomplete在获取焦点时得到显示列表功能示例

    jquery UI实现autocomplete在获取焦点时得到显示列表功能示例

    这篇文章主要介绍了jquery UI实现autocomplete在获取焦点时得到显示列表功能,结合实例形式分析了jquery UI实现autocomplete事件响应及显示下拉列表功能操作技巧,需要的朋友可以参考下
    2019-06-06
  • jquery制作多功能轮播图插件

    jquery制作多功能轮播图插件

    本文给大家分享的是一款基于jQuery制作的多功能的轮播幻灯插件,支持多种配置,十分的实用,这里推荐给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • jQuery的Read()方法代替原生JS详解

    jQuery的Read()方法代替原生JS详解

    众所周知在jQuery中ready方法在DOM完全下载后立即执行其中的代码。因为它是等所有的DOM元素都加载完毕,才执行给定的函数,所以你能确定那些试图操作和访问元素节点的方法都能被执行。而这篇文章给大家介绍的是如何用jQuery的Read()方法代替原生JS,下面来一起看看。
    2016-11-11
  • Jquery 全选反选实例代码

    Jquery 全选反选实例代码

    本文给大家介绍基于jquery代码实现的全选全不选反选实例代码,代码简单易懂,非常实用,感兴趣的一起学习吧
    2015-11-11
  • jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)

    jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)

    下面小编就为大家带来一篇jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 分享jQuery插件的学习笔记

    分享jQuery插件的学习笔记

    这篇文章主要为大家分享了jQuery插件的学习笔记,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • jQuery中大家不太了解的几个方法

    jQuery中大家不太了解的几个方法

    在今天这篇文章中,我们将介绍几个jQuery的相关方法,无论你是入门级极客或者骨灰级极客,可能都会忽略这些方法的使用。希望大家会觉得有帮助!
    2015-03-03

最新评论