jQuery渐变下拉菜单的实现方法 - 完美篇

» 2010-03-12 86条评论

我曾经写过一篇《jQuery 渐变下拉菜单的实现方法》,但此方法有个 bug :就是当鼠标快速地连续触发外部元素事件,动画会滞后的反复执行,相当不美观,这个问题 mg12 也写过一篇文章说明和提供解决方法,但今天我写的方法是 Willlin 帮我解决的方法,很简单的方法。我只把代码贴出,具体代码的标注就不标了 ,原因很简单:我是 CP 党 - -

下面以 RSS 订阅 jQuery 渐变下拉菜单为例:

演示:原自用主题 zww-line 右上角 RSS 订阅效果 》传送门(ps:这个效果是我专门为 zww-line 定制的,下面的代码没有图片,但完全可以通过修改 css 实现)

第一步:加载 jQuery 库和 jQuery 代码

在 footer.php 的 <?php wp_footer(); ?> 下面加入如下代码:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		$("#rss").hover(function(){if(!$(this).children("#rss ul").is(":animated")){$(this).children("#rss ul").slideDown("800");}},function(){$(this).children("#rss ul").slideUp("400");});//willin
	})
</script>

注:如果已经加载了 jQuery 库,那么第一行删除,如果你有专门的 js 文件,吧 $(function(){... ... }) 加入即可。

第二步:在放 RSS 的地方输入以下 html

<div id="rss"><a href="http://feed.zww.me" rel="nofollow" title="订阅我的博客" target="_blank">订阅我的博客</a>
     <ul>
           <li><a href="http://fusion.google.com/add?feedurl=http://feed.zww.me" target="_blank" rel="nofollow" title="Google订阅">Google订阅</a></li>
           <li><a href="http://www.xianguo.com/subscribe.php?url=http://feed.zww.me" target="_blank" rel="nofollow" title="订阅到鲜果">鲜果订阅</a></li>
           <li><a href="http://www.zhuaxia.com/add_channel.php?url=http://feed.zww.me" target="_blank" rel="nofollow" title="订阅到抓虾">抓虾订阅</a></li>
           <li><a href="http://reader.youdao.com/b.do?keyfrom=feedsky&amp;url=http://feed.zww.me" target="_blank" rel="nofollow" title="订阅到有道">有道订阅</a></li>
           <li><a href="http://inezha.com/add?url=http://feed.zww.me" target="_blank" rel="nofollow" title="订阅到哪吒">哪吒订阅</a></li>
           <li><a href="http://mail.qq.com/cgi-bin/feed?u=http://feed.zww.me" target="_blank" rel="nofollow" title="订阅到QQ邮箱">QQ邮箱订阅</a></li>
           <li><a href="http://add.my.yahoo.com/rss?url=http://feed.zww.me" target="_blank" rel="nofollow" title="订阅到Yahoo">Yahoo订阅</a></li>
           <li><a href="http://www.feedsky.com/msub_wr.html?burl=zwwooooo" target="_blank" rel="nofollow" title="邮件订阅">邮件订阅</a></li>
           <li><a href="http://feed.zww.me" target="_blank" rel="RSS" title="更多方式">更多方式 &raquo;</a></li>
     </ul>
</div>

注:把 http://feed.zww.me 改为自己的 Feed 地址,<li></li> 随便增加/减少订阅

第三步:#rss 的 css 部分

#rss{
position:relative;
z-index:10;
float:left;
margin:0;
padding:0;
width:20px;
height:20px;
}

#rss ul{
position:absolute;
display:none;
z-index:9999;
top:0;
right:0;
text-align:center;
background:#fff;
width:120px;
padding:15px;
border:1px solid #ccc;
}

#rss ul li{
list-style:none;
border-bottom:1px solid #f2f2f2;
padding:3px 0;
}

就这样,具体可以根据自己实际情况更改,样式可以通过修改 css 实现

zww
or
oooo

“jQuery渐变下拉菜单的实现方法 - 完美篇”有86条评论

  1. 不懂啊,下拉例表很漂亮

  2. jason says:

    又一次无耻的 :idea: 使用IE六来看看

    1. zwwooooo says:

      @jason 哈哈,不过这个效果在ie6下一样有效

  3. jason says:

    就是国产设计师命苦了,不得不兼顾IE6,做个网站多麻烦。看人家外国设计师多洒脱,80%的博客模板,直接不考虑IE6

    1. zwwooooo says:

      @jason 国民网络水平低……

  4. 元胜 says:

    很漂亮了

  5. 老七 says:

    都这研究jq :arrow:

  6. ooaixt says:

    好东东要收藏

  7. popo says:

    最喜欢渐变效果了。收藏了 :roll:

  8. willin says:

    以前我 A6 主題上用過, 所以才會去改善代碼, 主要是加了 .is(":animated") 來判斷動作中不能再觸發. :mrgreen:
    ps.這表情我已加入 Typecho 表情插件了, 默認表情就是這套, 不錯!

    1. zwwooooo says:

      @willin 哈哈,很完美了,所以还是贴出来大家玩儿。

      这套表情还是很有个性,主要比较新颖了。

      今天去你那反馈的ajax评论问题是chrome的一个翻译插件引起的,所以不是代码问题,囧

  9. 小邪 says:

    嘿嘿,经典,小邪收藏下了喔 ~

    1. zwwooooo says:

      @小邪 这个对你没什么难度吧 :evil:

    2. evlos says:

      @zwwooooo 懒呗,╮(╯▽╰)╭ ~

  10. 老千 says:

    copy试试效果,呵呵

  11. 阿邙 says:

    记号 改日来看

    1. zwwooooo says:

      @阿邙 看来你已经看了

    2. 阿邙 says:

      @zwwooooo 并且忍不住偷走了

  12. [...] 文章来源:《jQuery渐变下拉菜单的实现方法 – 完美篇》  » 转载请注明来源:阿邙的收藏夹 » 《简单的jQuery渐变下拉菜单》 » 本文链接地址:http://amangs.com/fav/?p=498  » 订阅本站:阿邙的收藏夹RSS Tags: jQuery, jQuery导航菜单 上一篇:Js 定时执行与循环执行(setInterval与setTimeout) [...]

  13. hesiway says:

    在鼠标停留执行事件前加个缓冲时间就好了

    1. zwwooooo says:

      @hesiway 自己优化,哈

  14. wordpress主题修改时参考的一些文章 | 八万光年 says:

    [...] jQuery渐变下拉菜单的实现方法 – 完美篇 [...]

  15. 5945me says:

    其实我是来测试Gravatar头像的! :grin: :grin:

    1. zwwooooo says:

      @5945me
      霍霍,慢慢测试吧,我这有缓存的哦

    2. 5945me says:

      @zwwooooo
      一个月了,强大!

    3. zwwooooo says:

      @5945me
      可能头像自动更新又失效了。。。

  16. 郑永 says:

    很好很强大!借过了。

    1. zwwooooo says:

      @郑永
      慢慢折腾

  17. Jarain says:

    感谢博主分享,我用在我的博客之后每当鼠标滑过一次之后"订阅我的博客"按钮就会消失,不知何故。

    1. zwwooooo says:

      @Jarain
      貌似你的木有问题

    2. Jarain says:

      @zwwooooo
      我不知道怎么解决这个问题于是就给它的DIV加了一个背景图片~ 如果图片放在的里面的话还是会消失~

    3. zwwooooo says:

      @Jarain
      是z-index问题吧,检查一下吧

  18. Jarain says:

    它邻居不寂寞了...

    1. zwwooooo says:

      @Jarain
      那么表示感谢,哈

  19. jQuery 实现下拉菜单方法 | Alan's World says:

    [...] .stop() 方法行不通,google 之,在 zwwooooo 那发现了个方法,加个判断语句 if [...]

  20. xuzizzz says:

    这个没整明白,放上去没有出现Query效果,大叔啥时候研究一下RSS地址不用feedsky 绑定二级域名呗

    1. zwwooooo says:

      @xuzizzz
      稍微学点jQuery基础吧,折腾起来就不费劲了。feedsky你可以不用,折腾啥?

发表评论

昵称 *

网址

B em del U Link Code Quote