Lava Lamp menu in jQuery

CODICE HTML

  1.  
  2. <div id="lava">
  3.  
  4. <ul>
  5. <li><a href="#">home</a></li>
  6. <li><a href="#">lava lamp menu</a></li>
  7. <li><a href="#">queness.com</a></li>
  8. <li class="selected"><a href="#">jQuery</a></li>
  9. </ul>
  10.  
  11. <!-- If you want to make it even simpler, you can append these html using jQuery -->
  12. <div id="box"><div class="head"></div></div>
  13.  
  14. </div>
  15.  

CODICE CSS

  1.  
  2. body {
  3. font-family:georgia;
  4. font-size:14px;
  5. }
  6. a {
  7. text-decoration:none;
  8. color:#333;
  9. }
  10.  
  11. #lava {
  12. /* you must set it to relative, so that you can use absolute position for children elements */
  13. position:relative;
  14. text-align:center;
  15. width:583px;
  16. height:40px;
  17. }
  18.  
  19. #lava ul {
  20. /* remove the list style and spaces*/
  21. margin:0;
  22. padding:0;
  23. list-style:none;
  24. display:inline;
  25.  
  26. /* position absolute so that z-index can be defined */
  27. position:absolute;
  28.  
  29. /* center the menu, depend on the width of you menu*/
  30. left:110px;
  31. top:0;
  32.  
  33. /* should be higher than #box */
  34. z-index:100;
  35.  
  36. }
  37.  
  38. #lava ul li {
  39.  
  40. /* give some spaces between the list items */
  41. margin:0 15px;
  42.  
  43. /* display the list item in single row */
  44. float:left;
  45. }
  46.  
  47. #lava #box {
  48.  
  49. /* position absolute so that z-index can be defined and able to move this item using javascript */
  50. position:absolute;
  51. left:0;
  52. top:0;
  53.  
  54. /* should be lower than the list menu */
  55. z-index:50;
  56.  
  57. /* image of the right rounded corner */
  58. background:#ccc;
  59. height:20px;
  60.  
  61. /* add padding 8px so that the tail would appear */
  62. padding-right:8px;
  63.  
  64. /* self-adjust negative margin to make sure the box display in the center of the item */
  65. margin-left:-10px;
  66. }
  67.  
  68. #lava #box .head {
  69. /* image of the left rounded corner */
  70. background:#eee;
  71. height:20px;
  72.  
  73. /* self-adjust left padding to make sure the box display in the center of the item */
  74. padding-left:10px;
  75. }
  76.  

CODICE JAVASCRIPT

  1.  
  2.  
  3. $(document).ready(function () {
  4.  
  5. //transitions
  6. //for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/
  7. var style = 'easeOutElastic';
  8.  
  9. //Retrieve the selected item position and width
  10. var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
  11. var default_width = $('#lava li.selected').width();
  12.  
  13. //Set the floating bar position and width
  14. $('#box').css({left: default_left});
  15. $('#box .head').css({width: default_width});
  16.  
  17. //if mouseover the menu item
  18. $('#lava li').hover(function () {
  19.  
  20. //Get the position and width of the menu item
  21. left = Math.round($(this).offset().left - $('#lava').offset().left);
  22. width = $(this).width();
  23.  
  24. //Set the floating bar position, width and transition
  25. $('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});
  26. $('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});
  27.  
  28. //if user click on the menu
  29. }).click(function () {
  30.  
  31. //reset the selected item
  32. $('#lava li').removeClass('selected');
  33.  
  34. //select the current item
  35. $(this).addClass('selected');
  36.  
  37. });
  38.  
  39. //If the mouse leave the menu, reset the floating bar to the selected item
  40. $('#lava').mouseleave(function () {
  41.  
  42. //Retrieve the selected item position and width
  43. default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
  44. default_width = $('#lava li.selected').width();
  45.  
  46. //Set the floating bar position, width and transition
  47. $('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});
  48. $('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing: style});
  49.  
  50. });
  51.  
  52. });
  53.