jQuery渐变下拉菜单的实现方法

» 2009-05-10 27条评论

今天 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 吧 :mrgreen:

zww
or
oooo

“jQuery渐变下拉菜单的实现方法”有27条评论

  1. daniel says:

    这个教程好呀!3Q!

  2. 吖Bee says:

    好像有更简单的方法...mg12那个~

  3. ligyxy says:

    jquery的下拉菜单有很多现成的了,改改CSS就好。帕兰印象那儿有很多

  4. Xiao3 says:

    哇~对于这个不懂,一点也不懂!我还是用现成的俗啊啦!

  5. 麦田 says:

    挖到宝了,下拉式菜单很酷,又不占用地方,很实用!收藏了!

    1. ligyxy says:

      关键是不大想用JQUERY。。。70+KB。。肯定大拖速度

  6. 小毅 says:

    强大的jquery,你们看那个jquery的官网PR值为三,好厉害啊。

    强大的折腾,呵呵,我们都爱折腾。 :D

    1. zwwooooo says:

      因为喜欢,所以折腾嘛 :mrgreen:

    2. 小毅 says:

      一激动,居然把PR=8写成了三,呵呵,那个官网真牛,一进去,那么酷。

  7. zwwooooo says:

    @daniel 我也是拿来就用

    @吖Bee mg12那里我没看,因为我的也是人家做好给我的

    @ligyxy 是的,我也没去研究,只是把自己用的共享出来

    @Xiao3 我也是,呵呵

    @麦田 对啊,不用空出一大片侧边栏给它

    @ligyxy 其实一般的空间可以忽略不计,一眨眼的事 :mrgreen:

    1. ligyxy says:

      首页控制在30K以内才好啊

      1. zwwooooo says:

        也不一定,如果要体验jQuery,肯定会影响速度,但控制好‘度’就可以了,不要一味追求速度也不要一味追求效果,对不? :P

  8. 阿婆 says:

    嗯,渐变的效果如果是再慢一点点会更好,自然一点。

  9. kramon says:

    这个就太深奥了,不懂,飘过..

  10. 爱月 says:

    消失了一段时间~这会儿回来了~开始若隐若现阶段~跟老朋友say个hello~然后闪人~

  11. 君君 says:

    很好呢~不过都多半都没人订我的家常网站

  12. 小T says:

    很不错,不过我自己都没怎么用这些服务

  13. zwwooooo says:

    @阿婆 哈,我也觉得太快了点,刚调慢了

    @kramon 真正的实现方法要学点jQuery吧

    @爱月 是有一段时间不见你更新你的博客了

    @君君 呵呵,我的也不多,一般都是朋友订的——为了方便

    @小T 反正博客就放RSS,不管有多少人订阅 :mrgreen:

  14. Derek says:

    全是人啊,位置都满了~~~
    我还是喜欢用我那种,分类的订阅自己进去找 :mrgreen:

  15. 这方法可以吗

  16. zytyz says:

    都是一群研究技术的N人啊

  17. zwwooooo says:

    @Derek 呵呵,我是因为觉得这主题太简约才加上去的

    @免费资源网 难道不可以吗?那我的是咋回事? :lol:

    @zytyz 其实都是菜鸟 :mrgreen:

  18. ligyxy says:

    你玩JQUERY么?我现在需要在JQUERY下加入一段声音代码。。。谷也谷不出来。。

    1. zwwooooo says:

      具体没有学哦,你直接请教 sofish 或许能得到答案,twitter他吧

  19. 铵铵 says:

    :grin: 好东西,好玩意.

  20. 锋子 says:

    看不懂js~~ :evil:

    1. zwwooooo says:

      @锋子 看不懂直接CP试试 :lol:

回复给 小T ¬
取消回复

昵称 *

网址

B em del U Link Code Quote