首页>>导航菜单>>Jquery 下拉菜单动画效果(2013-10-04)

Jquery 下拉菜单动画效果

 本例除了下面的这些代码还用了比较多的js文件，请看演示源码

Jquery 下拉菜单动画效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code
  1. <div id="container">  
  2. <div id="navigation">  
  3.   <ul>  
  4.                     <li><a href="">Home</a></li>  
  5.                     <li><a href="http://www.freejs.net">freejs</a>  
  6.                         <ul>  
  7.                             <li><a href="http://www.freejs.net/daohangcaidan.html">导航菜单</a></li>  
  8.                             <li><a href="http://www.freejs.net/tabbiaoqian.html">TAB标签</a></li>  
  9.   
  10.                         </ul>  
  11.                     </li>  
  12.                       
  13.                     <li><a href="/about">About</a></li>  
  14.                   
  15.                 </ul>  
  16.             </div>  
  17.   
  18. </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.             $(document).ready(function() {  
  3.                 $("#navigation").dropSlideMenu({  
  4.                     indicators: true, // adds a div to the list items for attaching indicators (arrows)  
  5.                     clickstream: true, // highlights the clickstream in a menu by comparing the links to the current URL path  
  6.                     openEasing: "easeOutQuad", // open animation effect  
  7.                     closeEasing: "easeInQuad", // close animation effect  
  8.                     duration: 600, // speed of drop down animation (in milliseconds)  
  9.                     delay: 800, // delay before the drop down closes (in milliseconds)  
  10.                     hideSelects: true // hide all select elements on the page when the menu is active (IE6 only)  
  11.                 });  
  12.             });  
  13.         </script>  

 

CSS Code
  1. /* first level > list */  
  2. ul.ds {  
  3.     z-index: 1000;  
  4. }  
  5.   
  6. /* first level > list items */  
  7. ul.ds li {  
  8.     float: left;  
  9.     position: relative;  
  10.     margin: 0 0.5em 0 0;  
  11.     line-height: 1em;  
  12.     z-index: 1001;  
  13. }  
  14.   
  15. /* first level > link style */  
  16. ul.ds li a, ul.ds li a:visited {  
  17.     position: relative;  
  18.     display: block;  
  19.     padding: 0.7em 1em;  
  20.     line-height: 1em;  
  21.     text-decoration: none;  
  22.     color: #fff;  
  23.     background-color: #0f1923;  
  24. }  
  25.   
  26. /* first level > link style > hover */  
  27. ul.ds li a:hover {  
  28.     color: #5cbeff;  
  29.     background-color: #1a3855;  
  30. }  
  31.   
  32. /* indicators */  
  33. ul.ds li div.indicator {  
  34. }  
  35.   
  36. ul.ds li div.indicator a {  
  37.     background-image: url("indicators.png");  
  38.     background-position: rightright 12px;  
  39.     background-repeat: no-repeat;  
  40. }  
  41.   
  42. /* open state and hover style */  
  43. ul.ds li.open div.indicator a, ul.ds li div.indicator a:hover {  
  44.     color: #5cbeff;  
  45.     background-color: #1a3855;  
  46.     background-position: rightright -140px;  
  47. }  
  48.   
  49. /* second level > list */  
  50. ul.ds li ul {  
  51.     position: absolute;  
  52.     left: 0;  
  53.     visibility: hidden;  
  54.     z-index: 1001;  
  55. }  
  56.   
  57. /* second level > list items (override first level > list items) */  
  58. ul.ds li ul li {  
  59.     float: none;  
  60.     margin: 0;  
  61.     /*display: inline;*/  
  62. }  
  63.   
  64. /* second level > link style */  
  65. ul.ds li ul li a, ul.ds li ul li a:visited {  
  66.     padding: 0.5em 1em;  
  67.     color: #eee !important;  
  68.     background-image: none;  
  69.     background-color: #0f1923;  
  70.     border-top: 1px solid #485d72;  
  71. }  
  72.   
  73. /* individual styling of first list link style */  
  74. ul#dsList-1 li a, ul#dsList-1 li a:visited {  
  75.     background-color: #5c0000;  
  76.     border-top: 1px solid #a74242;  
  77. }  
  78.   
  79. /* second level > link style > hover */  
  80. ul.ds li ul li a:hover {  
  81.     color: #ff91df !important;  
  82.     background-color: #480b36 !important;  
  83. }  
  84.   
  85. /* clickstream */  
  86. ul.ds li.clickstream a {  
  87.     color: #5cbeff;  
  88. }  
  89.   
  90. ul.ds li.clickstream div.indicator a {  
  91.     background-position: rightright -64px;  
  92. }  
  93.   
  94. ul.ds li.open.clickstream div.indicator a, ul.ds li.clickstream div.indicator a:hover {  
  95.     background-position: rightright -140px;  
  96. }  
  97.   
  98. ul.ds li ul li.clickstream a {  
  99.     color: #5cbeff !important;  
  100.     background-color: #000 !important;  
  101. }  
  102.   
  103. /* list item widths */  
  104. li#dsListItem-1 {  
  105.     width: 7em;  
  106. }  
  107.   
  108. li#dsListItem-2 {  
  109.     width: 10em;  
  110. }  
  111.   
  112. li#dsListItem-3 {  
  113.     width: 7em;  
  114. }  
  115.   
  116. /* list widths */  
  117. ul#dsList-1 {  
  118.     width: 7em;  
  119. }  
  120.   
  121. ul#dsList-2 {  
  122.     width: 10em;  
  123. }  
  124.   
  125. ul#dsList-3 {  
  126.     width: 9em;  
  127. }  
  128.   
  129. div.dsClear { /* to clear the floated list items */  
  130.     clear: both;  
  131.     height: 0;  
  132.     font-size: 0;  
  133.     line-height: 0;  
  134. }  

 


原文地址:http://www.freejs.net/article_daohangcaidan_57.html