Make Sub Menus Slide Down Gently

Hi Barb

The menu is controlled by JavaScript, not CSS. However, you can install a plugin called Header and Footer Scripts, I’m using the one by WPBeginner. Then, in the header field provided by the plugin, insert:

<script>
jQuery(function($){

    // The menu hover effects
    $('#masthead')
        .on('mouseenter', '.main-navigation ul li', function(){
            var $$ = $(this);
            var $ul = $$.find('> ul');
            $ul.css({
                'display' : 'block',
                'opacity' : 0
            }).clearQueue().animate({opacity: 1}, 900);
            $ul.data('final-opacity', 1);
        } )
        .on('mouseleave', '.main-navigation ul li', function(){
            var $$ = $(this);
            var $ul = $$.find('> ul');
            $ul.clearQueue().animate( {opacity: 0}, 900, function(){
                if($ul.data('final-opacity') === 0) {
                    $ul.css('display', 'none');
                }
            });
            $ul.data('final-opacity', 0);
        } );

});
</script>

See my two 900 values. Those are 250 by default. You can adjust to slow the transition down further. You can reduce to speed it up.

Hi Barb

Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:

[email protected]

Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.

Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.

Hi Barb

Sorry, doesn’t seem like it arrived. Please, could you send using the Private Reply option bottom right. Thanks :)

I can see the problem, the transition is happening twice, the second transition is the delayed one. I can’t figure out why I’m not getting the same result on my local demo.

The problem was Appearance > Theme Settings > General > Enqueue JavaScript in Footer. For this application we that setting disabled. We need the scripts in the default location, in the document head.

There will be a small difference. On normal DSL connections it probably isn’t noticeable. Up to you.

For sure :)