Ransom, a simple jQuery tab menu with animation


/ Published in: jQuery
Save to your folder(s)

Hovering over a ransomTab animates in the ransomStrip of the same index


Copy this code and paste it in your HTML
  1. <script>
  2. $(function(){
  3. // Document is ready
  4. $('.ransomStrip').not('.ransomStrip:eq(0)').animate({left: '-400px'});
  5. $('.ransomTab:eq(0)').addClass('ransomTabActive');
  6. $('.ransomTab').hover(function(){
  7. var indy = $('.ransomTab').index(this);
  8. $(this).addClass('ransomTabActive');
  9. $('.ransomTab').not(this).removeClass('ransomTabActive');
  10. $('.ransomStrip').not('.ransomStrip:eq('+indy+')').animate({left: '-400px'});
  11. $('.ransomStrip:eq('+indy+')').animate({left: '0px'});
  12. });
  13. });
  14. </script>
  15. </head>
  16.  
  17. <body class="">
  18. <h1>Ransom <em>by Cirrostratus Design Company</em></h1>
  19. <h2>A jQuery-powered tab menu inspired by iStockphoto.com</h2>
  20. <div id="ransom">
  21. <div id="ransomMain">
  22. </div><!--ransomMain-->
  23. <div id="ransomTabs">
  24. <div class="ransomTab">
  25. <p>Web</p>
  26. </div><!--ransomTab-->
  27. <div class="ransomTab">
  28. <p>Illustrations</p>
  29. </div><!--ransomTab-->
  30. <div class="ransomTab">
  31. <p>Video</p>
  32. </div><!--ransomTab-->
  33. </div><!--ransomTabs-->
  34.  
  35. <div class="ransomStrip" id="Web">
  36. <div class="ransomPrice">
  37. <p>$10</p>
  38. <small>web</small>
  39. </div><!--ransomPrice-->
  40. <div class="ransomPrice">
  41. <p>$20</p>
  42. <small>web</small>
  43. </div><!--ransomPrice-->
  44. <div class="ransomPrice">
  45. <p>$40</p>
  46. <small>web</small>
  47. </div><!--ransomPrice-->
  48. <div class="ransomPrice">
  49. <p>$50</p>
  50. <small>web</small>
  51. </div><!--ransomPrice-->
  52. </div><!--ransomStrip-->
  53.  
  54. <div class="ransomStrip" id="Illustrations">
  55. <div class="ransomPrice">
  56. <p>$5</p>
  57. <small>ill</small>
  58. </div><!--ransomPrice-->
  59. <div class="ransomPrice">
  60. <p>$30</p>
  61. <small>ill</small>
  62. </div><!--ransomPrice-->
  63. <div class="ransomPrice">
  64. <p>$40</p>
  65. <small>ill</small>
  66. </div><!--ransomPrice-->
  67. <div class="ransomPrice">
  68. <p>$60</p>
  69. <small>ill</small>
  70. </div><!--ransomPrice-->
  71. <div class="ransomPrice">
  72. <p>$90</p>
  73. <small>ill</small>
  74. </div><!--ransomPrice-->
  75. </div><!--ransomStrip-->
  76.  
  77. <div class="ransomStrip" id="Video">
  78. <div class="ransomPrice">
  79. <p>$15</p>
  80. <small>vid</small>
  81. </div><!--ransomPrice-->
  82. <div class="ransomPrice">
  83. <p>$25</p>
  84. <small>vid</small>
  85. </div><!--ransomPrice-->
  86. <div class="ransomPrice">
  87. <p>$50</p>
  88. <small>vid</small>
  89. </div><!--ransomPrice-->
  90. </div><!--ransomStrip-->
  91.  
  92. </div><!--ransom-->

URL: http://cirrostratusco.com/ransom_a-price-menu.php

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.