Prevent menu from expanding on hover?

Home Forums Older releases 0.9.x Prevent menu from expanding on hover?

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1358
    fellun
    Participant

    I’m using the “Bootstrap Addon (Navbar)”, and I wonder how I can stop the menu from expanding by hovering each menu item. Bottstrap Navbar is only expanding when clicking items. That’s how I want it.
    /Felix

    #1670
    admin
    Keymaster

    You can try using the showOnClick option. To do so you will need to edit the “jquery.smartmenus.bootstrap.js” file and pass the option in the SmartMenus init call here:

    $this.addClass('sm').smartmenus({
    
    		// these are some good default options that should work for all
    		// you can, of course, tweak these as you like
    		subMenusSubOffsetX: 2,
    		subMenusSubOffsetY: -6,
    		subIndicatorsPos: 'append',
    		subIndicatorsText: '...',
    		collapsibleShowFunction: null,
    		collapsibleHideFunction: null,
    		rightToLeftSubMenus: $this.hasClass('navbar-right'),
    		bottomToTopSubMenus: $this.closest('.navbar').hasClass('navbar-fixed-bottom')
    	})

    e.g. like this:

    $this.addClass('sm').smartmenus({
    		showOnClick: true,
    		...

    If you are using the minified version you will need to find the right spot to insert the option.

    This would make the first level sub menus open onclick. It is similar to how OS menus work but it is not completely the same like the original Bootstrap dropdowns work. Please let me know if this is fine for you.

    Cheers!

    #1671
    fellun
    Participant

    Oh… Fascinating that I missed showOnClick in the documentation…
    It’s definitely better. My users are quite demanding and know what they want, so I’m quite sure they will get back asking if it can be made clickable in “every step”.

    I guess there is no simple way to achieve clickable menu items instead of mouseOver then?

    Thanks for your quick answer and a very good menu plugin!
    /Felix

    #1672
    admin
    Keymaster

    Hi again and sorry for the delay! Unfortunately, I wasn’t able to look into this earlier.

    You can achieve the exact Bootstrap behavior, for example, like this – first grab a fresh copy of “jquery.smartmenus.bootstrap.js” and then:

    1) Activate touch mode even when a mouse is present by adding the following at the end of the file to overwrite the default prototype method:

    // activate touch mode permanently
    $.SmartMenus.prototype.isTouchMode = function() {
    	return true;
    };

    This will make sure items are only activated on click/tap.

    2) Change the following:

    'click.smapi': function(e, item) {
    	var obj = $(this).data('smartmenus');
    	if (obj.isCollapsible()) {
    		var $item = $(item),
    			$sub = $item.parent().dataSM('sub');
    		if ($sub && $sub.dataSM('shown-before') && $sub.is(':visible')) {
    			obj.itemActivate($item);
    			obj.menuHide($sub);
    			return false;
    		}
    	}
    }

    like this:

    'click.smapi': function(e, item) {
    	var obj = $(this).data('smartmenus'),
    		$item = $(item),
    		$sub = $item.parent().dataSM('sub');
    	if ($sub && $sub.dataSM('shown-before') && $sub.is(':visible')) {
    		obj.itemActivate($item);
    		obj.menuHide($sub);
    		return false;
    	}
    }

    This will make sure parent items onclick always just toggle their sub menus even on desktop (you cannot activate their links like with Bootstrap’s default navbars).

    Please let me know if you this does the trick for you.

    #3289
    schappaughc
    Participant

    Many thanks! I found this to be very helpful. Needed to use the default bootstrap functionality.

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