[MaksemMParticipant]

Hi,

I’m currently using some jQuery code you guys helped me make for a clickable dropdown menu:

jQuery(function($){
$('.x-sidebar.left .widget_nav_menu li.menu-item-has-children').prepend('<span><i class="x-icon x-icon-angle-double-down" data-x-icon=""></i></span>');
	$('#menu-courses-menu .sub-menu').hide();
	$('#menu-courses-menu li.menu-item-has-children span').on('click', function(e){
		e.preventDefault();
		$(this).next().next('.sub-menu').slideToggle('slow');			
		var icon = $( this ).find( 'i' );
		if ( icon.data('x-icon') == '' ) {
			icon.data('x-icon', '');
			icon.removeClass('x-icon-angle-double-up').addClass('x-icon-angle-double-down');
		} else {
			icon.data('x-icon', '');
			icon.removeClass('x-icon-angle-double-down').addClass('x-icon-angle-double-up');		
		}
		
	});
});

We want to try keeping the sidebar menu fixed and sitting just under the top nav bar as a user scrolls. We want to display its’ submenu items on hover in a floating box just off to the right of the menu.

I have been trying to alter this code to perform the fadeToggle function and then use css to alter some looks.

I’ve altered the above jQuery like so but it’s not working:

jQuery(function($){
	$('#menu-courses-menu .sub-menu').hide();
	$('#menu-courses-menu li.menu-item-has-children span').on('hover', function(e){
		e.preventDefault();
		$(this).next().next('.sub-menu').fadeToggle('100');			
				
	});
});

Thanks 🙂 !

[ThaiModerator]

Hi There,

Please provide us with your website URL so we can take a closer look.

Thanks.

[MaksemMParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

Please try with this code instead:

jQuery(function($){
	$('#menu-courses-menu .sub-menu').hide();
	$('#menu-courses-menu li.menu-item-has-children span').on('mouseover', function(e){
		$(this).next().next().fadeIn('100');					
	});
});

Hope it helps 🙂

[MaksemMParticipant]

Hi there,

Unfortunately it’s not working.

Thanks!

[LelyModerator]

Hi There,

Please try to update to this:

jQuery(function($){
	$('#menu-courses-menu .sub-menu').hide();
	$('#menu-courses-menu li.menu-item-has-children a').on('mouseover', function(e){
		$(this).next().fadeIn('100');					
	});
});

Hope this helps.

[MaksemMParticipant]

Hi there,

Thanks! That’s exactly what I was looking for 🙂

I changed fadeIn to show for a smoother opening of the menu and I added a hide function so the code now looks like this:

jQuery(function($){
	$('#menu-courses-menu .sub-menu').hide();
	$('#menu-courses-menu li.menu-item-has-children a').on('mouseover', function(e){
		$(this).next().show('100');
		$('#menu-courses-menu li.menu-item-has-children a').on('mouseleave', function(e){
		$(this).next('.sub-menu').hide('100');
		});
	});
});

The only problem now is that the menu closes too quickly before you can browse that menu items sub-menu. Would you have any suggestions as to how I can keep the currently hovered menu item open whilst you browse that items sub-menu? I hope that makes sense.

Thanks 🙂 !

[RupokMember]

Hi there,

Thanks for updating. You can try updating your code to following :

jQuery(function($){
	$('#menu-courses-menu .sub-menu').hide();
	$('#menu-courses-menu li.menu-item-has-children a').on('mouseover', function(e){
		$(this).next().show('2000');
		$('#menu-courses-menu li.menu-item-has-children a').on('mouseleave', function(e){
		$(this).next('.sub-menu').hide('2000');
		});
	});
});

Note that I have updated the timeout 100ms to 2000ms (2 seconds). If you need to adjust it more, you can change the value.

Hope this helps.

Cheers!

[MaksemMParticipant]

Hi,

Thanks for that. Still not working. I’ll have a play with the code some more. Might try some if and else statements to see if I can solve it.

Cheers 🙂

[RadModerator]

Okay cool, good luck 😉 Cheers!

[MaksemMParticipant]

Hi again,

I found the right solution with this one:

jQuery(function($){
	$('#menu-courses-menu .sub-menu').hide();
	$('#menu-courses-menu li.menu-item-has-children a').on('mouseover', function(e){
		$(this).next().slideToggle('100');
		});
	$('#menu-courses-menu').on('mouseleave', function (){
		$('.sub-menu').hide('100');
	});
});

Thanks for your suggestions! 🙂

[LelyModerator]

You’re welcome!

Thank you for sharing the final code.

Always,
X

[Author]

Posts