Yep, the script has a pretty good API and it’s possible to modify the behavior in many ways quite easily. I have planned to add some samples in the docs soon too but anyway.
First let me explain why it works like that by default since I think this is quite important. When in collapsible mode, the first click/tap on a menu item that has a sub menu activates the sub menu and the second click loads the item link. This allows setting actual links that work even in collapsible mode to the parent menu items which many users prefer being able to do. That’s why by default we hide the sub menu indicators after the first click instead of, for example, showing a minus “-” since that would easily trick the end users into thinking that clicking again would collapse the sub menu instead of activating the item’s link.
Now here are some instructions how to modify this behavior if you like:
1) Comment out/delete the following rule in the theme CSS file (e.g. “sm-blue.css”) – it’s inside the last media query:
/* Sub menu indicators
===================*/
...
/* Hide sub indicator "+" when item is expanded - we enable the item link when it's expanded */
.sm-blue a.highlighted span.sub-arrow {
display:none !important;
}
This will make sure the indicators are not hidden when the sub menu is expanded.
2) Choose one of these JS mods and add it on your page:
a) Variant 1 – Click/tap to toggle the sub menus in collapsible mode:
// click/tap to toggle the sub menus in collapsible mode
var lastClicked = null;
$('#main-menu').bind('click.smapi', function(e, item) {
var obj = $(this).data('smartmenus');
if (obj.isCollapsible()) {
lastClicked = item;
var $sub = $(item).parent().dataSM('sub');
if ($sub && $sub.dataSM('shown-before') && $sub.is(':visible')) {
obj.menuHide($sub);
return false;
}
}
});
$('#main-menu').bind('beforehide.smapi', function(e, menu) {
if (lastClicked && lastClicked != $(menu).dataSM('parent-a')[0]) {
lastClicked = null;
return false;
}
});
$('#main-menu').bind('show.smapi', function(e, menu) {
$(menu).dataSM('parent-a').children('span.sub-arrow').text('-');
});
$('#main-menu').bind('hide.smapi', function(e, menu) {
$(menu).dataSM('parent-a').children('span.sub-arrow').text('+');
});
b) Variant 2 – Click/tap to toggle the sub menus in collapsible mode and also reset deeper levels and other expanded branches:
// click/tap to toggle the sub menus in collapsible mode (reset deeper levels and other branches too)
$('#main-menu').bind('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;
}
}
});
$('#main-menu').bind('show.smapi', function(e, menu) {
$(menu).dataSM('parent-a').children('span.sub-arrow').text('-');
});
$('#main-menu').bind('hide.smapi', function(e, menu) {
$(menu).dataSM('parent-a').children('span.sub-arrow').text('+');
});
Any of these mods will make sure parent menu items only toggle their sub menus on click/tap when in collapsible mode (also meaning it makes it impossible to activate their link). These also make sure the text in the sub indicators is toggled when a sub menu is shown/hidden – i.e. “+” or “-” is displayed.
Hope this helps. Please let me know if you have any questions.
.
