jQuery动画下拉菜单

  • L7_163847
    了解作者
  • 21.2KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-15 06:41
    上传日期
jQuery动画下拉菜单
jQuery动画下拉菜单.rar
内容介绍
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="robots" content="all" /> <title>jQuery动画下拉菜单Drill Down Menu在线演示</title> <link href="css/dcdrilldown.css" rel="stylesheet" type="text/css" /> <link href="css/skins/graphite.css" rel="stylesheet" type="text/css" /> <link href="css/skins/blue.css" rel="stylesheet" type="text/css" /> <link href="css/skins/grey.css" rel="stylesheet" type="text/css" /> <link href="css/skins/demo.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script> <script type="text/javascript" src="js/jquery.dcdrilldown.1.2.min.js"></script> <script type="text/javascript"> $(document).ready(function($){ $('#drilldown-1').dcDrilldown(); $('#drilldown-2').dcDrilldown({ speed : 'fast', saveState : true, showCount : true, linkType : 'link', backText : 'All', defaultText : 'Select Option' }); $('#drilldown-3').dcDrilldown({ speed : 'slow', saveState : true, showCount : false, linkType : 'breadcrumb' }); $('#drilldown-4').dcDrilldown({ speed : 'fast', saveState : false, showCount : false, linkType : 'backlink' }); }); </script> </head> <body> <div class="wrap"> <div style="width:700px;margin:10px auto 20px auto;padding:0 0 0 380px;overflow:hidden"> <iframe src="http://demo.itivy.com/include/follow.html" frameborder="0" scrolling="auto" marginwidth="0" marginheight="0" allowtransparency="true" width="645px" height="35px"></iframe> <!-- Baidu Button BEGIN --> <div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare" style="margin:10px 0 0 -4px"> <a class="bds_tsina" rel='nofollow' onclick='return false;'></a> <a class="bds_tqq" rel='nofollow' onclick='return false;'></a> <a class="bds_renren" rel='nofollow' onclick='return false;'></a> <a class="bds_qzone" rel='nofollow' onclick='return false;'></a> <a class="bds_douban" rel='nofollow' onclick='return false;'></a> <a class="bds_xg" rel='nofollow' onclick='return false;'></a> <span class="bds_more">更多</span> <a class="shareCount" rel='nofollow' onclick='return false;'></a> </div> <script type="text/javascript" id="bdshare_js" data="type=tools" ></script> <script type="text/javascript" id="bdshell_js"></script> <script type="text/javascript"> document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours (); </script> <!-- Baidu Button END --> </div> <div style="display: none"> <script language="javascript" type="text/javascript" src="http://js.users.51.la/4473358.js"></script> <script type="text/javascript"> var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fadd0db9dee36c7a9b64141788e26de72' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-21395429-1']); _gaq.push(['_trackPageview']); (function () { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </div> <div id="adsense2" style="width:730px;margin:10px auto"> <script type="text/javascript"><!-- google_ad_client = "ca-pub-0107013120141921"; /* demo页面横幅广告 */ google_ad_slot = "4192399144"; google_ad_width = 728; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <div id="adsense" style="width:730px;margin:10px auto"> <script type="text/javascript">/*demo页面横幅*/ var cpro_id = 'u956777';</script><script src="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script> </div> <div class="graphite demo-container"> <ul id="drilldown-1"> <li><a href="#" rel='nofollow' onclick='return false;'>Home</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Products</a> <ul> <li><a href="#" rel='nofollow' onclick='return false;'>Mobile Phones &#038; Accessories</a> <ul> <li><a href="#" rel='nofollow' onclick='return false;'>Product 1</a> <ul> <li><a href="#" rel='nofollow' onclick='return false;'>Part A</a> <ul> <li><a href="#" rel='nofollow' onclick='return false;'>Sale</a> <ul> <li><a href="#" rel='nofollow' onclick='return false;'>Special Offers</a> <ul> <li><a href="#" rel='nofollow' onclick='return false;'>Offer 1</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Offer 2</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Offer 3</a></li> </ul> </li> <li><a href="#" rel='nofollow' onclick='return false;'>Reduced Price</a> <ul> <li><a href="#" rel='nofollow' onclick='return false;'>Offer 4</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Offer 5</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Offer 6</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Offer 7</a></li> </ul> </li> <li><a href="#" rel='nofollow' onclick='return false;'>Clearance Items</a> <ul> <li><a href="#" rel='nofollow' onclick='return false;'>Offer 9</a></li> </ul> </li> <li class="menu-item-129"><a href="#" rel='nofollow' onclick='return false;'>Ex-Stock</a> <ul> <li><a href="#" rel='nofollow' onclick='return false;'>Offer 10</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Offer 11</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Offer 12</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Offer 13</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#" rel='nofollow' onclick='return false;'>Part B</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part C</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part D</a></li> </ul> </li> <li><a href="#" rel='nofollow' onclick='return false;'>Product 2</a <ul> <li><a href="#" rel='nofollow' onclick='return false;'>Part A</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part B</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part C</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part D</a></li> </ul> </li> <li><a href="#" rel='nofollow' onclick='return false;'>Product 3</a> <ul> <li><a href="#" rel='nofollow' onclick='return false;'>Part A</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part B</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part C</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part D</a></li> </ul> </li> </ul> </li> <li><a href="#" rel='nofollow' onclick='return false;'>Desktop</a> <ul> <li><a href="#" rel='nofollow' onclick='return false;'>Product 4</a> <ul> <li><a href="#" rel='nofollow' onclick='return false;'>Part E</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part F</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part G</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part H</a></li> </ul> </li> <li><a href="#" rel='nofollow' onclick='return false;'>Product 5</a> <ul> <li><a href="#" rel='nofollow' onclick='return false;'>Part E</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part E</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part F</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part G</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part H</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part G</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part H</a></li> </ul> </li> <li><a href="#" rel='nofollow' onclick='return false;'>Product 6</a> <ul> <li><a href="#" rel='nofollow' onclick='return false;'>Part E</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part F</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part G</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part H</a></li> </ul> </li> <li><a href="#" rel='nofollow' onclick='return false;'>Product 7</a> <ul> <li><a href="#" rel='nofollow' onclick='return false;'>Part E</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part F</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part G</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part H</a></li> </ul> </li> <li><a href="#" rel='nofollow' onclick='return false;'>Product 8</a> <ul> <li><a href="#" rel='nofollow' onclick='return false;'>Part E</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part F</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part G</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part H</a></li> </ul> </li> <li><a href="#" rel='nofollow' onclick='return false;'>Product 9</a> <ul> <li><a href="#" rel='nofollow' onclick='return false;'>Part E</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part F</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part G</a></li> <li><a href="#" rel='nofollow' onclick='return false;'>Part H</a></li> </ul> </li> </ul> </li> <li><a href="#" rel='nofollow' onclick='return false;'>Laptop</a> <ul> <li><a href="#" rel='nofollow' onclick='return false;'>Produ
评论
    相关推荐
    • jquery 动画显示
      jquery的应用,包括jquery的一些简单事例。
    • apycom-menu:动画jQuery下拉菜单
      动画jQuery菜单样式08-黄绿色 jQuery菜单幻灯片样式09-绿黄色 jQuery导航菜单样式10-橙色 jQuery DropDown菜单样式11-鞍棕色 jQuery CSS下拉菜单样式12-钢蓝色 jQuery弹出菜单样式13-深粉红色 jQuery弹出菜单样式14-...
    • jQuery动画联系
      里面有十个动画小项目,是联系jQuery的不错选择
    • JQUERY动画导航
      JQUERY漂亮动画导航,个人收藏的,分享给大家,建议使用
    • jquery动画笔记
      笨人的学习笔记,压缩包内有视频,关于jquery的animate部分
    • jquery动画菜单
      jquery动画菜单jquery动画菜单jquery动画菜单
    • jquery动画特效
      jquery特效动画以及常用效果,案例展示这款jQuery按钮插件的使用方法也很简单,给按钮指定一个类,然后用一行JS代码初始化即可。
    • 18种响应式分层动画jQuery幻灯片特效
      这是一款效果非常炫酷的响应式分层动画jQuery幻灯片特效。该幻灯片每一组动画分为多个层,每一层可以使用不同的动画效果,共有18种不同的效果可以选择。
    • 鼠标悬停div边框动画 jquery 6个动画类型
      鼠标悬停div边框动画 jquery鼠标悬停div边框动画 6个动画类型
    • 动画jQuery鼠标悬停图片遮罩显示描述文字特效代码
      动画jQuery鼠标悬停图片遮罩显示描述文字特效代码,非常不错的代码特效,图片遮罩显示 文字,常用的JS特效,一般需要显示图片的文字描述,基于jQuery实现。