hover for width bigger then 768px click for smaller

Home Forums Older releases 0.9.x hover for width bigger then 768px click for smaller

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #2623
    z3phir
    Participant

    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

    #2625
    admin
    Keymaster

    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!

    #2626
    z3phir
    Participant

    thanks a lot for your help

Viewing 3 posts - 1 through 3 (of 3 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?