hamburger menu not being removed

[jnmills]

I have a site i am playing with (bsbasa.org/new/site.html) but in mobile mode i can not get the (hamburger) menu to vanish once i have picked an item.

the main “desktop” mode works fine.

Your main site (smartmenus.org) exhibits the behaviour i am looking for.

currently I click the hamburger, then click (say) county meets, then select an item.

the sub menus collapse, but the main menu does not.

I implimented the patched code suggested in the forum, and the hamburger from the Docs section

[admin]

I saw you are using an iframe to load your links inside, so you could use, for example, something like this:

// simulate a click on the menu toggle button on menu item select in mobile view
$('#main-menu').bind('select.smapi', function(e, item) {
	var obj = $(this).data('smartmenus');
	if (obj.isCollapsible()) {
		$('#main-menu-state')[0].click();
	}
});

[jnmills]

Thank you: However the event doesn’t seem to fire when I test it so I am no further forward.

I wondered if it was because I added the code from the Docs page to toggle the hamburger (I did not get the hamburger displayed until I added that code), so there may be an interaction I am not aware of

Jonathan

[admin]

Put the code right after your SmartMenus init code:

                $("#main-menu").smartmenus({
                    hideOnClick: true  //, isPopup: true;
//subMenusSubOffsetX: 1,
//                  subMenusSubOffsetY: -8
                }
);

so that it’s called ondomready just like the above and it should work.

[jnmills]

You’re right: that’s MUCH better: Thank you.

[jnmills]

After a while live, we’ve noticed a curious behaviour.

On a PC, the menus are expanded with a click, and if you mouse-click away from the menu, they are removed.

However on an iPad, clicking away doesn’t hide the menu – the only way to remove it is to select an item (or change the URL or reload the page)

The hamburger menu on an iPhone behaves similarly – but in that case the changing of the hamburger menu to an “X” means that you can remove the menu. But clicking away from the menu won’t do that.

I don’t know if it’s because a mouse-click will remove it but a finger touch won’t .. I don’t have a mouse on the iPad or a touch on the PC!

Regards
Jonathan

[admin]

This is caused by the following customization you are using:

// SmartMenus mod - hide the menus on document click just in collapsible mode
$.SmartMenus.prototype._docClick = $.SmartMenus.prototype.docClick;
$.SmartMenus.prototype._docTouchEnd = $.SmartMenus.prototype.docTouchEnd;
$.SmartMenus.prototype.docClick = function (e) {
    if (this.isCollapsible()) {
        this._docClick(e);
    }
}
$.SmartMenus.prototype.docTouchEnd = function (e) {
    if (this.isCollapsible()) {
        this._docTouchEnd(e);
    }
}

If you remove it, the sub menus should be hidden on tap on iPad.

[jnmills]

Hmm They aren’t though (see bsbasa.org/index.html) The menus stay up
until one is selected…

[Author]

Posts