Return to Snippet

Revision: 50178
at August 14, 2011 05:27 by marshalletm


Initial Code
(function($) {
    
    $.fn.spasticNav = function(options) {
        
        options = $.extend({
                overlap : 20,
                speed : 500,
                reset : 1500,
                color : '#0b2b61',
                easing : 'easeOutExpo'
        }, options);
        
        return this.each(function() {  
            
            var nav = $(this),
                currentPageItem = $('#selected', nav),
                blob,
                reset;
            
            $('<li id="blob"></li>').css({
                width : currentPageItem.outerWidth(),
                height : currentPageItem.outerHeight() + options.overlap,
                left : currentPageItem.position().left,
                top : currentPageItem.position().top - options.overlap / 2,
                backgroundColor : options.color
            }).appendTo('#nav');
            
            blob = $('#blob', nav);

            $('li:not(#blob)', nav).hover(function() {  
                // mouse over  
                clearTimeout(reset);  
                blob.animate(  
                    {  
                        left : $(this).position().left,  
                        width : $(this).width()  
                    },  
                    {  
                        duration : options.speed,  
                        easing : options.easing,  
                        queue : false  
                    }  
                );  
            }, function() {  
                // mouse out
                blob.stop().animate({
                    left : $(this).position().left,
                    width : $(this).width()
                }, options.speed);
                
                reset = setTimeout(function() {  
                    blob.animate({  
                        width : currentPageItem.outerWidth(),  
                        left : currentPageItem.position().left  
                    }, options.speed)  
                }, options.reset);  
              
            });  

        }); // end each 
    }; 

})(jQuery);

Initial URL


Initial Description
save this file as jquery.spasticNav.js

Initial Title
JavaScript for Lava-Lamp style Nav Menu

Initial Tags


Initial Language
JavaScript