SmartMenus and Drupal Bootstrap theme

[Ben59]

Hi!

Thanks for a really great script! I am using the Drupal Bootstrap theme (dev version, https://www.drupal.org/project/bootstrap) and using Boostrap 3.2.0.

By standard this theme allows for dropdowns, but only one level and only the second level takes you somewhere (a click on the first level only opens the dropdown).

I made some simple modifications in the theme_menu_link function to allow for more levels and also make all levels “clickable” (i.e. the click takes you to a new page).

When I activate SmartMenus, everything seems works fine, except for one thing in collapsed mode (“mobile” view): on all menus except the last level the first click opens the dropdown and a second click just closes it (i.e. the second click doesn’t take you to a new page), which I think is not by default for SmartMenus. (In non-collapsed mode or “desktop” mode everything works as expected.)

Is the collapse.js in the Bootstrap (http://getbootstrap.com/javascript/#collapse) responsible for this somehow? Or is there a setting I should change in SmartMenus?

I understand if this question is out of scope for your support, but any suggestions would be most welcome.

I have sent a link via mail.

Best,
Ben

[admin]

Hi Ben, and sorry for this delay! I was on a summer holiday.

Yep, your observations are correct. When used with the Bootstrap addon the SmartMenus script would emulate Bootstrap’s behavior for collapsible menus – i.e. a tap/click on a parent item can only toggle its sub menu. To restore the default SmartMenus behavior – first click to show the sub menu and second to activate the link – you will need to edit “jquery.smartmenus.bootstrap.js” and delete/comment out the following code:

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

Let me know if you still have any troubles.

Cheers!

[Ben59]

Hi!

Thanks for quick support (after you arrived back from holiday)! And it works fine!

What would you say are pros/cons concerning Bootstrap behaviour and SmartMenus standard behaviour? Are there any widely accepted standard?

/Ben

[admin]

To be honest, I am personally not completely convinced too which is the best approach. But I guess the most popular solution now is to use a separate element to just trigger the sub menu – e.g. a +/- icon button – and (also based on user feedback) I have actually now decided to switch to this behavior as a default in the next version. Though I will probably not do this for the Bootstrap add-on since I prefer to keep Bootstrap’s default behavior as this is just what most of its users would expect.

As for Bootstrap’s solution, it obviously has one disadvantage and it is that it does not allow activating the link of the parent item if it has an actual href set (unless the user long taps and activates the link via the browser context menu).

[MarioBaron]

Hello admin. Wish I knew your name ‘cose you are a lifesaver for a lot of us liking Bootstrap for all the perks it offers but hating developer policy on menu’s. I was even contemplating moving to zurb foundation framework for this reason.
In any case I have a few suggestions and I hope they make sense.
1. Please reconsider “since I prefer to keep Bootstrap’s default behavior as this is just what most of its users would expect” and include the smartmenus default behaviour with bootstrap plugin as well. Simple logic says that if people were happy with Bootstrap default behaviour there would be no need for excellent plugins such as yours and none of would be here. My view is that people who want default Bootstrap behaviour can just use bootstrap out of the box or perhaps the little better known but less robust CWSpears plugin which only changes default bootstrap behaviour slightly.
2. Perhaps adding a clickable “shadow” copy of parent menu item like in Superfish for example would be a solution (although I am not really a huge fan of it)
3. I would gladly pay for a plugin that overrides bootstrap in the way that smartmenus does (including parent menu behaviour) and I’d pay even more if it included off canvas and other fancy goodies like we have in Foundation framework.

Bootstrap is a great framework but it is not by any means perfect and menu are definitely one of the biggest imperfections judging by the huge amount of threads both in bootstrap issue queue and elsewhere so there is a real market for plugins such as yours that remove those imperfections.

[admin]

Hey Mario, thanks very much for sharing your thoughts and suggestions! I get your points and actually I’ve already been implementing some notable changes to the default behavior that should land in the next release (i.e. adding a big toggle +/- button to parent items in collapsible mode). So I will probably also consider the same approach for the Bootstrap plugin.

[MarioBaron]

I tried your solution from http://www.smartmenus.org/forums/topic/smartmenus-and-drupal-bootstrap-theme and works great in Bootstrap 3 Drupal base theme I just comment out line 35 of menu-link.func.php and that gets my parent menus working

//$element['#localized_options']['attributes']['data-toggle'] = 'dropdown';

For me first click opening submenu and second navigating to parent menu page feels really natural on touch devices (its a little of “if at first you don’t succeed try again approach) but if adding a big toggle +/- button is becoming more popular these days I guess that would work just as well. Perhaps leave both as an option?

Thanks for all the great work you’ve put into this. In Bootstrap 2 I used a slightly modified CWSpears plugin but, your plugin is definitely more complete so here I am 🙂

[admin]

For me first click opening submenu and second navigating to parent menu page feels really natural on touch devices (its a little of “if at first you don’t succeed try again approach) but if adding a big toggle +/- button is becoming more popular these days I guess that would work just as well. Perhaps leave both as an option?

Actually, I’ve done a combination of both and I think it works really well – i.e. first tap activates the sub menu, second tap activates the parent item link and in addition a big button is available for toggling the sub menu at any time. So my plan is to stick to this as a default from the next release. There is still some work left on other features but it is coming soon I hope.

Cheers and thanks for your input again!

[pdroz]

Hi,
I’m sorry but I don’t get how I can set smartmenus in my drupal 7 bootstrap 3 theme. Anyone could help me set everything?

Thanks!

[MarioBaron]

@pdroz This tutorial should prove helpful http://webmar.com.au/blog/drupal-bootstrap-3-multilevel-submenus-hover

[Author]

Posts