今天 zhchsf 朋友提出让我讲讲我的 FEED 订阅的 jQuery 渐变下拉菜单是如何实现的。其实呢，我对jQuery 一窍不通，我主题上 FEED 订阅的 jQuery 渐变下拉菜单其实是 sofish 在1个半月前帮我做的（那时不是这个主题），所以具体方法和原理啥的最好去参考 sofish 的文章：《jQuery 渐变下拉菜单》，我这里只是写出方法，给只是使用的朋友参考，顺便做下记录，免得以后自己都忘了。

1. css部分:

#rss {
position:relative;
width:20px;
height:20px;
float:right;
padding:0;
margin:0;
}/*这一部分根据自己的模板修改*/

#rss ul{
display:none;
position:absolute;
top:0;
right:0;
text-align:center;
background:#fff;
border:1px solid #ccc;
width:120px;
padding:15px 15px  20px;
}/*这里定义下拉菜单的位置和样式*/

#rss ul li{list-style:none;}

#rss ul li{
padding:5px 0;
/*border-bottom:1px dotted #6a6a6a;*/
}
/*a.rssfeed{color:#ffffff;}
a.gr{color:#0f0;}
a.xg{color:#9f0;}
a.zx{color:#ff0;}
a.yd{color:#cf0;}
a.yh{color:#9ff;}
a.el{color:#ffc;}

a.qq{color:#71CCFF;}
a.more-rss{color:#fff;}
a img{border:none;}*/
/*这里可以定义每个订阅文字的颜色，我没用所以屏蔽了，如果使用可以<li>里面用 class=xx 调用*/

2. RSS图片所在模板部分，我的在header.php，参考我的：

（把下面的 http://feed.zwwooooo.com 改成你的 feed 地址，rss.gif 为你的模板RSS图片）

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

3. 在 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($("li ul").queue().length<=1) $("#rss ul").slideToggle(300);},
function(){$("#rss ul").slideUp(300)}
)
})
</script>

就这样，具体还要自己测试，如果搞不定就在这提问我会尽量回答或者直接请教 sofish 吧

zww

赏

or

oooo

• 本文标题：jQuery渐变下拉菜单的实现方法
• 本文链接：https://zww.me/archives/24084
• 发布时间：2009年05月10日 16:20
• 版权声明：除非注明，文章均为 zwwooooo 原创，转载请以链接形式标明本文地址！