[jQuery] Help with a menu transition effect please

[Major_Disaster]

Hello all,

Im currently working on a new website and a new drop down menu using this tutorial

So far, this is what i have. It all seems to be working OK so far, but i dont like the fade transition its using. I would prefer something more like on the Nvidia site where there isnt a "fade lag".

I tried to use jQuery's FadeIn transition instead of the current fadeTo - but it just seemed to break the whole menu. So, how do i go about changing the transition effects (and trying some out), simply copying and pasting over the current fadeTo doesnt seem to work?

Thanks for any help

This is the code:

<script type="text/javascript">
$(document).ready(function() {
   
    function megaHoverOver(){
        $(this).find(".sub").stop().fadeTo('fast', 1).show();
       
        //Calculate width of all ul's
        (function($) {
            jQuery.fn.calcSubWidth = function() {
                rowWidth = 0;
                //Calculate row
                $(this).find("ul").each(function() {                   
                    rowWidth += $(this).width();
                });   
            };
        })(jQuery);
       
        if ( $(this).find(".row").length > 0 ) { //If row exists...
            var biggestRow = 0;   
            //Calculate each row
            $(this).find(".row").each(function() {                             
                $(this).calcSubWidth();
                //Find biggest row
                if(rowWidth > biggestRow) {
                    biggestRow = rowWidth;
                }
            });
            //Set width
            $(this).find(".sub").css({'width' :biggestRow});
            $(this).find(".row:last").css({'margin':'0'});
           
        } else { //If row does not exist...           
            //Set Width
    $(this).calcSubWidth();

    var o = $(this).find('.sub').offset();
    var p = $('#megaMenu').offset();
    var pw = document.getElementById('megaMenu').clientWidth;
    var tw = rowWidth;
    o.left = o.left - p.left;
    var tml = (tw + o.left) - pw;
   
    $(this).find(".sub").css({'width' : rowWidth}).css({'margin-left':'-' + tml - 20 + 'px'});
        }
    }
   
    function megaHoverOut(){
     $(this).find(".sub").stop().fadeTo('fast', 0, function() {
         $(this).css({'margin-left':'0'});
    $(this).hide();
     });
    }

    var config = {   
         sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)   
         interval: 100, // number = milliseconds for onMouseOver polling interval   
         over: megaHoverOver, // function = onMouseOver callback (REQUIRED)   
         timeout: 500, // number = milliseconds delay before onMouseOut   
         out: megaHoverOut // function = onMouseOut callback (REQUIRED)   
    };   

    $("ul#topnav li .sub").css({'opacity':'0'});
    $("ul#topnav li").hoverIntent(config);
});
</script>

 

[Pho]

Unless you really want to make it all yourself, you could use Free CSS Drop-Down Menu Framework - they even have an example of their menu being used as an nVidia menu clone. I used it for a project a while ago and it seemed good.

 

[Major_Disaster]

After scanning through your post, I was struggling to find the .js file that was making those menus in the examples and then i realised it was pure CSS - pretty impressive. Thanks a lot for the link - ill spend some time playing around with them

 

[Pho]

It's very handy . It uses JavaScript for old browsers (IE 5.5 and maybe IE 6) but the rest is pure CSS.

If you download it all the examples come packaged up in their own folders to see how they were done. Being modular it makes extending it to your own theme needs is very easy.