Hiding the dropdown menu at the desktop level only

Home Forums Older releases 1.0.x + Bootstrap addon Hiding the dropdown menu at the desktop level only

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2701
    mcwu07
    Participant

    I am currently trying to hide my dropdown menu when at the desktop level only (and activate it only at the mobile level).

    I am able to get it to partially work using:

    $(function() {
      $('#main-menu').bind('mouseenter.smapi', function(e, item) {$.SmartMenus.hideAll();
    });

    This hides the dropdown when hovering over the top nav, however when I click the link, the dropdown will quickly flash.

    The dropdown will also appear when I click and hold any of the top nav buttons.

    I tried

    $('#main-menu').bind('click.smapi', function(e, item) {$.SmartMenus.hideAll();

    and that did not work. I couldn’t find a mousedown equivalent either.

    Any help would be appreciated.

    Thanks.

    #2702
    admin
    Keymaster

    Hi, something like this should do the trick:

    $(function() {
    	// disable the sub menus in desktop mode
    	$('#main-menu').bind('activate.smapi', function(e, item) {
    		if (!$(this).data('smartmenus').isCollapsible()) {
    			return false;
    		}
    	});
    });

    Cheers!

    #2703
    mcwu07
    Participant

    Thanks for the quick response and help. That worked great!

    #2704
    mcwu07
    Participant

    One more follow-up.

    Using the code you provided above, would it be possible to target only a specific dropdown menu versus all dropdown menus.

    The “#main-menu” targets the ul (all dropdowns).

    I tried adding the li id (#menu-item-164) to the code to target the specific dropdown, but that didn’t work.

    $('#main-menu #menu-item-164').bind('activate.smapi'

    I also tried adding the li class (.menu-item-164) to the code to target the specific dropdown, but that didn’t work either.

    $('#main-menu .menu-item-164').bind('activate.smapi'

    Any help would be appreciated.

    Thanks!

    #2705
    admin
    Keymaster

    Yes, you can do it like this:

    $(function() {
    	// disable the sub menus in desktop mode
    	$('#main-menu').bind('activate.smapi', function(e, item) {
    		// only for the li#menu-item-164 item
    		if ($(item).parent().is('#menu-item-164')) {
    			if (!$(this).data('smartmenus').isCollapsible()) {
    				return false;
    			}
    		}
    	});
    });

    The activate.smapi event is always triggered on the root UL and the item parameter is the menu item’s link (the <a> element).

    Cheers!

    #2707
    mcwu07
    Participant

    Thanks a bunch for the help and quick response! That worked perfectly.

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