hover for width bigger then 768px click for smaller

[z3phir]

hi and thanks for your work

is there any way to achieve this : submenus to expand on hover for width bigger then 768px and on click for smaller

[admin]

Yes, I am not sure what exact behavior you would like, so you can try any of these (add it after the SmartMenus init code):

1) Toggling the showOnClick option – when it’s true, it makes the menu behave like desktop application menus – i.e. click to activate the sub menus, then hover to show/hide them until another click deactivates them:

$(function() {
	var winW;
	function toggleMenuShowOnClick() {
		var newW = $(window).width();
		if (newW != winW) {
			$('#main-menu').data('smartmenus').opts.showOnClick = newW < 768;
			winW = newW;
		}
	};
	toggleMenuShowOnClick();
	$(window).bind('resize', toggleMenuShowOnClick);
});

2) Toggling touch mode detection - allows you to simulate the touch mode behavior on desktop - i.e. users always need to click to show/hide sub menus:

$(function() {
	$.SmartMenus.prototype.original_isTouchMode = $.SmartMenus.prototype.isTouchMode;
	var winW;
	function toggleMenuTouchMode() {
		var newW = $(window).width();
		if (newW != winW) {
			if (newW < 768) {
				$.SmartMenus.prototype.isTouchMode = function() { return true; };
			} else {
				$.SmartMenus.prototype.isTouchMode = $.SmartMenus.prototype.original_isTouchMode;
			}
			winW = newW;
		}
	};
	toggleMenuTouchMode();
	$(window).bind('resize', toggleMenuTouchMode);
});

Note that checking $(window).width() may not perfectly match your CSS breakpoint switching in some cases (due to scrollbars in desktop browsers) so if you want perfect match, you may consider some solutions like:

https://www.fourfront.us/blog/jquery-window-width-and-media-queries
https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript

Cheers!

[z3phir]

thanks a lot for your help

[Author]

Posts