Advanced Search

JavaScript for Lava-Lamp style Nav Menu

/ Published in: JavaScript
Save to your folder(s)
save this file as jquery.spasticNav.js

Expand | Embed | Plain Text

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.