Make submenu slide open/close

[Pretzels]

I absolutely love this script! Exactly how I think a mobile menu should work. Thank you.

When I open my main menu, it slides open. However, when I open my submenu, it just immediately appears.

Is there a way to make the submenu slide open as well?

[Pretzels]

So I figured out the opening part. In jquery.smartmenus.bootstrap.js, change collapsibleShowFunction: null on line 41 to:

collapsibleShowFunction: function($ul, complete) {
	$ul.slideDown(200, function() {
		complete();
	});
},

However, I haven’t quite figured out the closing. I tried doing the same thing with collapsibleHideFunction, but it still seems to jump closed.

[admin]

Yep, as you’ve noticed, by default the addon mimics Bootstrap’s default behavior so the sub menus are not animated in collapsible mode. So, you would need the following options:

collapsibleShowFunction: function($ul, complete) {
	$ul.slideDown(200, complete);
},
collapsibleHideFunction: function($ul, complete) {
	$ul.slideUp(200, function() {
		$ul.parent().removeClass('open');
		complete();
	});
}

And also another small change in “jquery.smartmenus.bootstrap.js” – comment out/remove the following code:

,
'hide.smapi': function(e, menu) {
	$(menu).parent().removeClass('open');
}

Alternatively, if you would like to avoid editing “jquery.smartmenus.bootstrap.js”, you could add the options directly in the HTML source in a data-sm-options attribute:

https://www.smartmenus.org/docs/#data-sm-options

and add the following JS code on your page after the link to “jquery.smartmenus.bootstrap.js”:

$(function() {
	$('ul.navbar-nav:not([data-sm-skip])').unbind('hide.smapi');
});

Cheers!

[Author]

Posts