Hide submenu of clicked menu item only

[spmi]

Hi,
on small devices (when the horizontal menu is shown as a vertical menu) I click on a menu item to show its submenu. When I click again on that item to hide its submenu, the whole menu collapses. Is it possible, to hide the submenu of that clicked menu item only?

Thanks!

[admin]

Hi,

To make the whole parent item just a toggle button for its sub menu in collapsible mode, you could use additionally something like this:

$(function() {
	// use the whole parent item as sub menu toggle button
	$('#main-menu').bind('click.smapi', function(e, item) {
		var obj = $(this).data('smartmenus');
		if (obj.isCollapsible()) {
			var $sub = $(item).dataSM('sub');
			if ($sub && $sub.is(':visible')) {
				obj.menuHide($sub);
				return false;
			}
		}
	});
});

As you have noticed, by default the script has a slightly different behavior for parent items in collapsible mode – the first click/tap on them, expands the sub menu, the second click/tap activates the item’s link (and collapses the sub menu since by default the hideOnClick: true option is used). Of course, at any time the sub menu indicator +/- button can also be used as toggle for the sub menu. This allows setting a link that can be activated to parent items, which is not possible in your case.

[spmi]

Hi,

we don’t need links on parent items, so your hack works perfectly for us.

Thanks a million for your detailed reply and your excellent script. 🙂

[beerye]

Sorry to dig up an old topic, but could you also add the ability to close on spacebar as well? This way it can open and close on spacebar, as well as click and enter?

[beerye]

As an aside, could that be a separate piece of code from above? That way I could choose whether I want to suppress a landing page link or not? But still toggle on spacebar (enter would go to landing page if enabled).

[admin]

There you go:

// deactivate item's sub on Space if it's activated
$.SmartMenus.prototype.old_rootKeyDown = $.SmartMenus.prototype.rootKeyDown;
$.SmartMenus.prototype.rootKeyDown = function(e) {
	if (!this.handleEvents()) {
		return;
	}
	if (this.isCollapsible()) {
		if (e.keyCode == 32) {
			var $target = $(e.target);
			if ($target.is('a') && this.handleItemEvents($target)) {
				var $sub = $target.dataSM('sub');
				if ($sub && $sub.is(':visible')) {
					this.menuHide($sub);
					e.preventDefault();
					return;
				}
			}
		}
	}
	this.old_rootKeyDown(e);
};

This replaces the default rootKeyDown method so just include it on your page after the script core “jquery.smartmenus.js”.

[GregJobs]

I tried the original code the Admin posted by making my own custom.js and adding it to a drupal subtheme.info file and that didn’t seem to have any effect. Then I added it to the bottom of the jquery.smartmenus.js, nothing, then the top, that seemed to break functionality of all submenus.

Alas, I cannot figure out how to make ALL parent menus only act as placeholders to access their subs regardless of desktop/mobile.

Any help would be greatly appreciated.

[Author]

Posts