Advanced Search

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