Changing the Collapse Behavior of Submenus in Bootstrap

Home Forums Older releases 0.9.x Changing the Collapse Behavior of Submenus in Bootstrap

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1415
    coolriz
    Participant

    Hi,

    I recently started using your awesome plugin for an experimental bootstrap site. I have to say I am loving it so far!

    I have one question though, if you can help me out with this then I will be very thankful.

    You see on my site I have a yamm mega menu in one of my dropdowns. I got it working pretty fine. The only problem I would like to address is that on mobile view when the menu is collapsed and I click on the link for the mega menu the dropdown slides down fine. Now when I click on some dropdown link below the “mega menu” the sub menu for the mega menu slides up and the new dropdown opens. The problem here is that the mega content of mega menu is so long that when it closes and slides up the menu is no longer in the viewport.

    Is there a way keep the dropdown menus open when a new dropdown menu is opened by the user ? or is there a way to shift the focus to the newly opened dropdown menu ? so that the link that was just clicked always remains in the viewport ?

    I hope I was able to explain my self. Let me know if my description confuses you.

    Thanks!

    #1815
    admin
    Keymaster

    Hi,

    If you are using the Bootstrap add-on (which I guess is the case), you will need to modify the “jquery.smartmenus.bootstrap.js” file. Just find the following:

    // click the parent item to toggle the sub menus (and reset deeper levels and other branches on click)
    'click.smapi': function(e, item) {
    	var obj = $(this).data('smartmenus');
    	if (obj.isCollapsible()) {
    		var $item = $(item),
    			$sub = $item.parent().dataSM('sub');
    		if ($sub && $sub.dataSM('shown-before') && $sub.is(':visible')) {
    			obj.itemActivate($item);
    			obj.menuHide($sub);
    			return false;
    		}
    	}
    }

    and replace it with the following:

    // click the parent item to toggle the sub menus
    'click.smapi': function(e, item) {
    	var obj = $(this).data('smartmenus');
    	if (obj.isCollapsible()) {
    		window._lastClickedItem = item;
    		var $sub = $(item).parent().dataSM('sub');
    		if ($sub && $sub.dataSM('shown-before') && $sub.is(':visible')) {
    			obj.menuHide($sub);
    			return false;
    		}
    	}
    },
    'beforehide.smapi': function(e, menu) {
    	if (window._lastClickedItem && window._lastClickedItem != $(menu).dataSM('parent-a')[0]) {
    		return false;
    	}
    }

    This will make sure sub menus are only toggled when their parent item is clicked (i.e. the menu will not function like an accordion any more).

    Please let me know if you still have any questions.

    Cheers!

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