Get Vertical Menu to work like mobile, but on hover.

[trestange]

Hello.

I want to have a vertical menu system on a site. SmartMenus, when on a desktop, displays the submenu to the right of the main menu item. I would like the submenu to appear underneath the main menu item just like it does for the mobile menu, but on hover instead of click. i know it will push the main menu item below it down, but this is what the client wants. Is there a simple way to accomplish this for SmartMenus?

Thanks!

[admin]

Hi,

You will need a couple of tweaks:

1) Enable the responsive styles for all viewport widths so that you get a collapsible menu in all cases. If you are using any of the default themes, just remove the media queries at the end of the CSS file but keep the rules inside.

Here is a bit more info on the subject:

http://www.smartmenus.org/docs/#small-screen-support

2) By default the script detects when the sub menus need to become collapsible (as defined in the CSS) and switches to “touch mode” – i.e. allows activating the sub menus on click/tap instead of on hover. So you will need to modify this behavior by adding the following JS lines somewhere in your source after the link to the SmartMenus script:

var oldIsTouchMode = $.SmartMenus.prototype.isTouchMode;
$.SmartMenus.prototype.isTouchMode = function() {
	return oldIsTouchMode.call({ isCollapsible: function() { return false; } });
}

This mod will make sure that collapsible sub menus will continue to work on hover when mouse input is present.

Hope this helps. Please let me know if you still have any troubles.

[trestange]

Excellent, thanks so much. After reviewing with the client, we may just use the system as is, but this is great information to have if they change their mind (as they often do).

Thanks again!
tre.

[Author]

Posts