Expand on hover when collapsed

[electricarts]

Hi,

i searched the forum already, but didn’t found something. For a specific site the menu for desktop and mobile will be the same. So the menu is all the time the collapsed “mobile” one and everything is working like a charm.

But what do i have to do, when i want the menu to expand on mouse-hover too and not only when clicking at the +-sign? (screenshot)

Cheers
Mario

http://extras.electricarts.de/snaps/smartmenu.png

[admin]

Hi,

Please check the following topic – there is a short sample code that will allow you to achieve what you would like:

http://www.smartmenus.org/forums/topic/get-vertical-menu-to-work-like-mobile-but-on-hover/

In addition you may try setting the hideTimeout option to some big value to prevent reseting the sub menus on hover out – e.g.:

hideTimeout: 86400000 // one day

Let me know if you have any troubles.

[electricarts]

Hi Vasil,

thanks for your reply! That topic helps a lot. Now it’s working like i wanted.

Just one more question. I show and hide the menu with a menu toggle button like explained in the docs. Is it possible to expand (show) the menu when i hover over the button too? Right now i have to click to show the menu. It would be nice to expand the menu when i click the button and/or hover over.

Cheers
Mario

[admin]

No problem at all! To make the toggle button work on hover too, you can use some additional JS like this:

$(function() {
	var menuHideTimer = 0,
		$menuBtn = $('#menu-button'),
		$menu = $('#main-menu');
	function hideDelayed() {
		clearHideTimer();
		if ($menu.is(':visible')) {
			menuHideTimer = setTimeout(function() {
				$menu.smartmenus('menuHideAll');
				$menuBtn.click();
			}, 500);
		}
	}
	function clearHideTimer() {
		if (menuHideTimer) {
			clearTimeout(menuHideTimer);
			menuHideTimer = 0;
		}
	}
	$menuBtn.bind({
		'mouseenter': function() {
			clearHideTimer();
			if (!$menu.is(':visible')) {
				$menuBtn.click();
			}
		},
		'mouseleave': hideDelayed
	});
	$menu.bind({
		'mouseenter': clearHideTimer,
		'mouseleave': hideDelayed
	});
});

Cheers!

[Author]

Posts