Expand on hover when collapsed

Home Forums Older releases 0.9.x Expand on hover when collapsed

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2271
    electricarts
    Participant

    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

    #2272
    admin
    Keymaster

    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.

    #2273
    electricarts
    Participant

    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

    #2277
    admin
    Keymaster

    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!

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?