jquery渐变下拉菜单改进版

发布时间:2019-09-01编辑:脚本学堂
有关jquery渐变下拉菜单的一个例子,jquery代码结合css样式,实现一个简单的下拉菜单,带有渐变样式效果

jquery渐变下拉菜单改进版

第一版jquery渐变下拉菜单,请查看:http://www.jb200.com/article/30882.html

1、加载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(){... ... }) 加入即可。

2、在放rss处输入:
 

复制代码 代码示例:
<div id="rss"><a href="http://blog.jb200.com" rel="nofollow" title="订阅我的博客" target="_blank">订阅我的博客</a>
<ul>
<li><a href="http://fusion.google.com/add?feedurl=http://blog.jb200.com" target="_blank" rel="nofollow" title="Google订阅">Google订阅</a></li>
<li><a href="http://www.xianguo.com/subscribe.php?url=http://blog.jb200.com" target="_blank" rel="nofollow" title="订阅到鲜果">鲜果订阅</a></li>
<li><a href="http://www.zhuaxia.com/add_channel.php?url=http://blog.jb200.com" target="_blank" rel="nofollow" title="订阅到抓虾">抓虾订阅</a></li>
<li><a href="http://reader.youdao.com/b.do?keyfrom=feedsky&amp;url=http://blog.jb200.com" target="_blank" rel="nofollow" title="订阅到有道">有道订阅</a></li>
<li><a href="http://inezha.com/add?url=http://blog.jb200.com" target="_blank" rel="nofollow" title="订阅到哪吒">哪吒订阅</a></li>
<li><a href="http://mail.qq.com/cgi-bin/feed?u=http://blog.jb200.com" target="_blank" rel="nofollow" title="订阅到QQ邮箱">QQ邮箱订阅</a></li>
<li><a href="http://add.my.yahoo.com/rss?url=http://blog.jb200.com" 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://blog.jb200.com" target="_blank" rel="RSS" title="更多方式">更多方式 &raquo;</a></li>
</ul>
</div>
 

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

3、#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实现。