2015年7月27日 星期一

jQuery Menu Hover 效果 

  1. var obj = null;
  2. function checkHover() {
  3. if (obj) {
  4. $(obj).find(‘ul’).fadeOut(‘fast’);// 淡出效果
  5.  
  7. }
  8. }
  9. $(document).ready(function () {
  10. $(‘#Nav >li’).hover(function () { // 移入的函數
  11. if (obj) {
  12. obj.find(‘ul’).fadeOut(‘fast’) // 淡出效果
  13. obj = null
  14. }
  15. $(this).find(‘ul’).fadeIn(‘fast’);
  16. }, function () { // 移出的函數
  17.  
  19. obj = $(this);
  20. setTimeout("checkHover()", 400);
  21. });
  22. });
  27. HTML :
  28.  
  30. <body>
  31. <ul id="NAV">
  32. <li >Test1
  33. <ul class="menu">
  34. <li><a href="#1">控制台首頁1</a></li>
  35. <li><a href="#2">編輯個人資料1</a></li>
  36. <li><a href="#3">個人空間管理1</a></li>
  37. </ul>
  38. </li>
  39. <li>Test2
  40. <ul class="menu">
  41. <li><a href="#1">控制台首頁2</a></li>
  42. <li><a href="#2">編輯個人資料2</a></li>
  43. <li><a href="#3">個人空間管理2</a></li>
  44. </ul>
  45. </li>
  46. </ul>
  47. </body>
  48. </html>
  49. CSS :
  50.  
  52. <style type="text/css">
  53. #NAV {width :100px; padding :0px ; list-style :none}
  54. #NAV li { background : #ddd; margin :1x; height :20px}
  55. .menu {padding :0px; margin-top :-18px ; margin-left :98px ;width :202px;list-style :none; display :none}
  56. .menu li {width :202px ; height :20px}
  57. </style>
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)