新款jQuery渐变的下拉菜单.rar

  • v0_290147
    了解作者
  • 20.5KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-14 02:56
    上传日期
新款jQuery渐变的下拉菜单.rar
新款jQuery渐变的下拉菜单.rar
  • 新款jQuery渐变的下拉菜单
  • jquery.min.js
    52.8KB
  • feedme.png
    2.6KB
  • rss.gif
    1.1KB
  • jquery-fadein-dropdown-menu.html
    2.5KB
内容介绍
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery 渐变下来效果</title> <style type="text/css"> a{text-decoration:none;color:#333;} a:hover{color:#f33;} a.gr{color:#227CE8;} a.xg{color:#f30;} a.zx{color:#690;} a.yd{color:#f00;} a.more-rss{color:#f60;} a img{border:none;} a.rssfeed{display:block;height:60px;width:160px;cursor:pointer;} .wrapper{width:700px;margin:0 auto;height:460px;position:relative;} .wrapper small{position:absolute;bottom:0;left:0;border-top:1px dotted #b3b3b3;display:block;width:700px;line-height:30px;text-align:right;} ul li{list-style:none;} ul li.dropdown{position:relative;width:160px;} ul li.dropdown ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:160px;padding:15px 15px 20px;} ul li.dropdown ul li{padding:5px 0;border-bottom:1px dotted #ddd;} </style> </head> <body> <div class="wrapper"> <h1><a href="" rel='nofollow' onclick='return false;'>jQuery 渐变下拉菜单</a></h1> <p>使用slideToggle和slideUp来实现.当然,也可以使用hide/show, fadeIn/fadeOut等来实现,只是效果不同,实现的方法还是相同的.需要注意的是,要给.dropdown加上position:relative;防止闪烁.</p> <ul class="fir"> <li class="dropdown"> <a class="rssfeed" rel='nofollow' onclick='return false;'></a> <ul> <li><a href="#" rel="RSS" rel='nofollow' onclick='return false;'></a></li> <li><a href="#" class="xg" rel="nofollow" rel='nofollow' onclick='return false;'>鲜果订阅</a></li> <li><a href="#" class="gr" rel="nofollow" rel='nofollow' onclick='return false;'>Google订阅</a></li> <li><a href="#" class="zx" rel="nofollow" rel='nofollow' onclick='return false;'>抓虾订阅</a></li> <li><a href="#" class="yd" rel="nofollow" rel='nofollow' onclick='return false;'>有道订阅</a></li> <li><a href="#" class="more-rss" rel="RSS" rel='nofollow' onclick='return false;'>更多方式 &raquo;</a></li> </ul> </li> </ul> <small>&copy; Copyright <a href="http://www.happinesz.cn" title="幸福收藏夹" rel='nofollow' onclick='return false;'>幸福收藏夹</a> created by sofish</small> </div> <script language="javascript" type="text/javascript" src="jquery.min.js"></script> <script language="javascript" type="text/javascript"> $(function(){ $(".fir .dropdown").hover( function(){ $("li ul").slideToggle(800); },function(){ $("li ul").slideUp(1000) }) }) </script> </body> </html>
评论
    相关推荐
    • jQuery
      jQuery
    • jQuery
      jQuery
    • jQuery
      jQuery
    • jQuery
      jQuery
    • jquery1.32
      jquery-1.3.2.min.js 最新 jquery-1.2.6-vsdoc-cn.js 中文注释版 jquery-1.2.6.pack.js 压缩后的直接使用(推荐) jquery-1.2.6.min.js 精简的版本(学习用) jquery-1.2.6.js 学习用的(97k) jquery_0.js 初始版
    • JQuery资料
      JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 JQuery资料 ...
    • jqueryDemo
      初学jquery的非常不错的demo (描述重点就可以了啊。还要有字数的限制。。 初学jquery的非常不错的demo 初学jquery的非常不错的demo 初学jquery的非常不错的demo )
    • jquery
      jquery
    • jquery
      Ajax使用例子(jQuery)
    • JQuery
      jQuery查询