Top Level Menu Item Shows/Hides Sub Menu on Click

Home Forums Older releases 1.0.x Top Level Menu Item Shows/Hides Sub Menu on Click

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #2877
    katieTBA
    Participant

    Hello again!

    Another hopefully quick question on the menu:

    When I hover over a first-level nav item, the dropdown menu appears the way I want it to. However, if I hover over and then click on the first-level nav item, the dropdown menu disappears. If I click on the first-level nav item again, it reappears.

    Is this related to how the menu works for mobile, since on mobile devices I do want the sub menus to toggle when the user clicks on the first-level nav item? How do I change it so that whenever the menu is not in its mobile version, clicking on the first-level nav item does not close the submenu?

    Thanks so much!

    #2881
    admin
    Keymaster

    Hi, check how it works with the hideOnClick: false option and let me know if you still have any concerns.

    Cheers!

    #2892
    katieTBA
    Participant

    Hello, thanks for your quick response!

    Changing hideOnClick to false makes it work the way I want it to when the menu is not in its mobile version. However, it breaks it in mobile: I can open but not close submenus by clicking on the first-level nav item in the mobile version. Is there a way to say hideOnClick: false only at min-width:970px? 970px is my breakpoint for switching between the mobile/non-mobile versions of the menu.

    Thanks again!

    #2901
    admin
    Keymaster

    Hi again and sorry for the long delay of this answer during the holidays!

    What comes to my mind right now is to use hideOnClick: true and the following mod in addition (this should be added after “jquery.smartmenus.js” in your page source but before your main menu init code):

    // 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);
    	}
    }

    This isn’t the most elegant solution but should work fine for now (in the future I may think of some generic way to allow using different options in mobile and desktop view).

    Happy Holidays!

    #3101
    xy0
    Participant

    I just wanted to say that this worked perfectly for me, thanks!

    #3237
    sascha
    Participant

    Hi there,

    what does the isCollapsible check do exactly?
    I have seen that it check for position == static, but not sure what that means…

    #3247
    admin
    Keymaster

    It checks at runtime whether the menu tree is in collapsible mode or not. In collapsible mode the sub menus (sub UL elements) have static position and in desktop mode they are absolute positioned.

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?