hamburger menu not being removed

Home Forums Older releases 1.0.x hamburger menu not being removed

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #3115
    jnmills
    Participant

    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

    #3118
    admin
    Keymaster

    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();
    	}
    });
    #3119
    jnmills
    Participant

    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

    #3120
    admin
    Keymaster

    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.

    #3121
    jnmills
    Participant

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

    #3214
    jnmills
    Participant

    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

    #3229
    admin
    Keymaster

    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.

    #3257
    jnmills
    Participant

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

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