Hide submenu of clicked menu item only

Home Forums Older releases 1.0.x Hide submenu of clicked menu item only

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #2706
    spmi
    Participant

    Hi,
    on small devices (when the horizontal menu is shown as a vertical menu) I click on a menu item to show its submenu. When I click again on that item to hide its submenu, the whole menu collapses. Is it possible, to hide the submenu of that clicked menu item only?

    Thanks!

    #2714
    admin
    Keymaster

    Hi,

    To make the whole parent item just a toggle button for its sub menu in collapsible mode, you could use additionally something like this:

    $(function() {
    	// use the whole parent item as sub menu toggle button
    	$('#main-menu').bind('click.smapi', function(e, item) {
    		var obj = $(this).data('smartmenus');
    		if (obj.isCollapsible()) {
    			var $sub = $(item).dataSM('sub');
    			if ($sub && $sub.is(':visible')) {
    				obj.menuHide($sub);
    				return false;
    			}
    		}
    	});
    });

    As you have noticed, by default the script has a slightly different behavior for parent items in collapsible mode – the first click/tap on them, expands the sub menu, the second click/tap activates the item’s link (and collapses the sub menu since by default the hideOnClick: true option is used). Of course, at any time the sub menu indicator +/- button can also be used as toggle for the sub menu. This allows setting a link that can be activated to parent items, which is not possible in your case.

    #2727
    spmi
    Participant

    Hi,

    we don’t need links on parent items, so your hack works perfectly for us.

    Thanks a million for your detailed reply and your excellent script. 🙂

    #3076
    beerye
    Participant

    Sorry to dig up an old topic, but could you also add the ability to close on spacebar as well? This way it can open and close on spacebar, as well as click and enter?

    #3077
    beerye
    Participant

    As an aside, could that be a separate piece of code from above? That way I could choose whether I want to suppress a landing page link or not? But still toggle on spacebar (enter would go to landing page if enabled).

    #3090
    admin
    Keymaster

    There you go:

    // deactivate item's sub on Space if it's activated
    $.SmartMenus.prototype.old_rootKeyDown = $.SmartMenus.prototype.rootKeyDown;
    $.SmartMenus.prototype.rootKeyDown = function(e) {
    	if (!this.handleEvents()) {
    		return;
    	}
    	if (this.isCollapsible()) {
    		if (e.keyCode == 32) {
    			var $target = $(e.target);
    			if ($target.is('a') && this.handleItemEvents($target)) {
    				var $sub = $target.dataSM('sub');
    				if ($sub && $sub.is(':visible')) {
    					this.menuHide($sub);
    					e.preventDefault();
    					return;
    				}
    			}
    		}
    	}
    	this.old_rootKeyDown(e);
    };

    This replaces the default rootKeyDown method so just include it on your page after the script core “jquery.smartmenus.js”.

    #3541
    GregJobs
    Participant

    I tried the original code the Admin posted by making my own custom.js and adding it to a drupal subtheme.info file and that didn’t seem to have any effect. Then I added it to the bottom of the jquery.smartmenus.js, nothing, then the top, that seemed to break functionality of all submenus.

    Alas, I cannot figure out how to make ALL parent menus only act as placeholders to access their subs regardless of desktop/mobile.

    Any help would be greatly appreciated.

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