JavaScript for Lava-Lamp style Nav Menu


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

save this file as jquery.spasticNav.js


Copy this code and paste it in your HTML
  1. (function($) {
  2.  
  3. $.fn.spasticNav = function(options) {
  4.  
  5. options = $.extend({
  6. overlap : 20,
  7. speed : 500,
  8. reset : 1500,
  9. color : '#0b2b61',
  10. easing : 'easeOutExpo'
  11. }, options);
  12.  
  13. return this.each(function() {
  14.  
  15. var nav = $(this),
  16. currentPageItem = $('#selected', nav),
  17. blob,
  18. reset;
  19.  
  20. $('<li id="blob"></li>').css({
  21. width : currentPageItem.outerWidth(),
  22. height : currentPageItem.outerHeight() + options.overlap,
  23. left : currentPageItem.position().left,
  24. top : currentPageItem.position().top - options.overlap / 2,
  25. backgroundColor : options.color
  26. }).appendTo('#nav');
  27.  
  28. blob = $('#blob', nav);
  29.  
  30. $('li:not(#blob)', nav).hover(function() {
  31. // mouse over
  32. clearTimeout(reset);
  33. blob.animate(
  34. {
  35. left : $(this).position().left,
  36. width : $(this).width()
  37. },
  38. {
  39. duration : options.speed,
  40. easing : options.easing,
  41. queue : false
  42. }
  43. );
  44. }, function() {
  45. // mouse out
  46. blob.stop().animate({
  47. left : $(this).position().left,
  48. width : $(this).width()
  49. }, options.speed);
  50.  
  51. reset = setTimeout(function() {
  52. blob.animate({
  53. width : currentPageItem.outerWidth(),
  54. left : currentPageItem.position().left
  55. }, options.speed)
  56. }, options.reset);
  57.  
  58. });
  59.  
  60. }); // end each
  61. };
  62.  
  63. })(jQuery);

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.