Top Level Menu Item Shows/Hides Sub Menu on Click

[katieTBA]

Hello again!

Another hopefully quick question on the menu:

When I hover over a first-level nav item, the dropdown menu appears the way I want it to. However, if I hover over and then click on the first-level nav item, the dropdown menu disappears. If I click on the first-level nav item again, it reappears.

Is this related to how the menu works for mobile, since on mobile devices I do want the sub menus to toggle when the user clicks on the first-level nav item? How do I change it so that whenever the menu is not in its mobile version, clicking on the first-level nav item does not close the submenu?

Thanks so much!

[admin]

Hi, check how it works with the hideOnClick: false option and let me know if you still have any concerns.

Cheers!

[katieTBA]

Hello, thanks for your quick response!

Changing hideOnClick to false makes it work the way I want it to when the menu is not in its mobile version. However, it breaks it in mobile: I can open but not close submenus by clicking on the first-level nav item in the mobile version. Is there a way to say hideOnClick: false only at min-width:970px? 970px is my breakpoint for switching between the mobile/non-mobile versions of the menu.

Thanks again!

[admin]

Hi again and sorry for the long delay of this answer during the holidays!

What comes to my mind right now is to use hideOnClick: true and the following mod in addition (this should be added after “jquery.smartmenus.js” in your page source but before your main menu init code):

// SmartMenus mod - hide the menus on document click just in collapsible mode
$.SmartMenus.prototype._docClick = $.SmartMenus.prototype.docClick;
$.SmartMenus.prototype._docTouchEnd = $.SmartMenus.prototype.docTouchEnd;
$.SmartMenus.prototype.docClick = function(e) {
	if (this.isCollapsible()) {
		this._docClick(e);
	}
}
$.SmartMenus.prototype.docTouchEnd = function(e) {
	if (this.isCollapsible()) {
		this._docTouchEnd(e);
	}
}

This isn’t the most elegant solution but should work fine for now (in the future I may think of some generic way to allow using different options in mobile and desktop view).

Happy Holidays!

[xy0]

I just wanted to say that this worked perfectly for me, thanks!

[sascha]

Hi there,

what does the isCollapsible check do exactly?
I have seen that it check for position == static, but not sure what that means…

[admin]

It checks at runtime whether the menu tree is in collapsible mode or not. In collapsible mode the sub menus (sub UL elements) have static position and in desktop mode they are absolute positioned.

[Author]

Posts