You are here: Home » All Categories » WordPress » WP Trick » jQuery渐变下拉菜单的实现方法 - 完美篇

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

Mar 12th, 2010 08:08 | ⊕ Leave a comment?(79) ⊕ Go to comments

我曾经写过一篇《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 实现

声明: 除非注明，ZWWoOoOo文章均为原创，转载请以链接形式标明本文地址
本文地址: http://zww.me/archives/25105

Filed under

WP Trick

| Tags:

, ,

Related Posts

Most Popular

79 Comments.

⊕Leave a comment?
  1. 90后的贼 90后的贼 2010-03-13 17:10 # TheWorld BrowserWindows XP

    不懂啊，下拉例表很漂亮

    Reply | Quote
    21楼
  2. jason jason 2010-03-13 17:47 # Internet Explorer 6.0Windows XP

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

    Reply | Quote
    22楼
  3. jason jason 2010-03-13 18:33 # TheWorld BrowserWindows XP

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

    Reply | Quote
    23楼
  4. 元胜 元胜 2010-03-13 20:07 # Opera 10.10Windows XP

    很漂亮了

    Reply | Quote
    24楼
  5. 老七 老七 2010-03-14 10:38 # Internet Explorer 7.0Windows XP

    都这研究jq :arrow:

    Reply | Quote
    25楼
  6. ooaixt ooaixt 2010-03-14 13:09 # Firefox 3.0.17Windows 7

    好东东要收藏

    Reply | Quote
    26楼
  7. popo popo 2010-03-15 17:44 # Firefox 3.6Windows 7

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

    Reply | Quote
    27楼
  8. willin willin 2010-03-15 19:30 # Firefox 3.5.8Windows XP

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

    Reply | Quote
    28楼
    • zwwooooo zwwooooo 2010-03-15 19:35 # Google Chrome 4.0.249.89Windows 7

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

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

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

      Reply | Quote
  9. 小邪 小邪 2010-03-19 01:02 # Opera 10.50Windows XP

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

    Reply | Quote
    29楼
  10. 老千 老千 2010-03-25 03:52 # Firefox 3.6.2Windows XP

    copy试试效果，呵呵

    Reply | Quote
    30楼
  11. 阿邙 阿邙 2010-07-09 23:05 # ChromePlus 1.4.0.0Windows 7

    记号 改日来看

    Reply | Quote
    31楼
  12. 简单的jQuery渐变下拉菜单 | 阿邙的收藏夹 - pingback on 2010/07/10/ 00:31
    32楼
  13. hesiway hesiway 2010-08-04 17:00 # 360Safe ExplorerWindows 7

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

    Reply | Quote
    33楼
  14. wordpress主题修改时参考的一些文章 | 八万光年 - pingback on 2010/12/13/ 16:12
    34楼
  15. 5945me 5945me 2011-05-15 02:37 # Firefox 4.0.1Windows 7

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

    Reply | Quote
    35楼
  16. 郑永 郑永 2011-06-18 23:24 # Firefox 3.0.8Windows XP

    很好很强大！借过了。

    Reply | Quote
    36楼
  17. Jarain Jarain 2011-06-28 09:19 # Google Chrome 13.0.782.14Windows 7

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

    Reply | Quote
    37楼
  18. Jarain Jarain 2011-06-28 09:20 # Google Chrome 13.0.782.14Windows 7

    它邻居不寂寞了...

    Reply | Quote
    38楼
  19. jQuery 实现下拉菜单方法 | Alan's World - pingback on 2011/07/05/ 23:34
    39楼

Leave a Reply


B em del U Link Code Quote

Trackbacks and Pingbacks: