Hiding the dropdown menu at the desktop level only

[mcwu07]

I am currently trying to hide my dropdown menu when at the desktop level only (and activate it only at the mobile level).

I am able to get it to partially work using:

$(function() {
  $('#main-menu').bind('mouseenter.smapi', function(e, item) {$.SmartMenus.hideAll();
});

This hides the dropdown when hovering over the top nav, however when I click the link, the dropdown will quickly flash.

The dropdown will also appear when I click and hold any of the top nav buttons.

I tried

$('#main-menu').bind('click.smapi', function(e, item) {$.SmartMenus.hideAll();

and that did not work. I couldn’t find a mousedown equivalent either.

Any help would be appreciated.

Thanks.

[admin]

Hi, something like this should do the trick:

$(function() {
	// disable the sub menus in desktop mode
	$('#main-menu').bind('activate.smapi', function(e, item) {
		if (!$(this).data('smartmenus').isCollapsible()) {
			return false;
		}
	});
});

Cheers!

[mcwu07]

Thanks for the quick response and help. That worked great!

[mcwu07]

One more follow-up.

Using the code you provided above, would it be possible to target only a specific dropdown menu versus all dropdown menus.

The “#main-menu” targets the ul (all dropdowns).

I tried adding the li id (#menu-item-164) to the code to target the specific dropdown, but that didn’t work.

$('#main-menu #menu-item-164').bind('activate.smapi'

I also tried adding the li class (.menu-item-164) to the code to target the specific dropdown, but that didn’t work either.

$('#main-menu .menu-item-164').bind('activate.smapi'

Any help would be appreciated.

Thanks!

[admin]

Yes, you can do it like this:

$(function() {
	// disable the sub menus in desktop mode
	$('#main-menu').bind('activate.smapi', function(e, item) {
		// only for the li#menu-item-164 item
		if ($(item).parent().is('#menu-item-164')) {
			if (!$(this).data('smartmenus').isCollapsible()) {
				return false;
			}
		}
	});
});

The activate.smapi event is always triggered on the root UL and the item parameter is the menu item’s link (the <a> element).

Cheers!

[mcwu07]

Thanks a bunch for the help and quick response! That worked perfectly.

[Author]

Posts