Hello, yes it could be achieved via the API with some additional code. For example, the following should work (add it somewhere on your page):
JS:
$(function() {
var $mainMenu = $('#main-menu'),
$underlay = $('<div id="main-menu-underlay"></div>').appendTo('body');
$mainMenu.bind({
'show.smapi': function(e, menu) {
var $sub = $(menu),
$li = $sub.parent(),
obj = $mainMenu.data('smartmenus'),
mainMenuOffset = $mainMenu.offset();
// position deeper level sub menus right below the main menu
if ($sub.dataSM('level') > 2) {
$sub.css('margin-top', mainMenuOffset.top + obj.getHeight($mainMenu) - $li.offset().top - obj.getHeight($li));
}
// show/position underlay
$underlay.stop(true, true);
if (!$underlay.is(':visible')) {
$underlay.css({ top: mainMenuOffset.top + obj.getHeight($mainMenu), left: mainMenuOffset.left, width: obj.getWidth($mainMenu), height: obj.getHeight($sub) }).show();
} else {
// get max height of visible sub menus
var maxHeight = 0;
$.each(obj.visibleSubMenus, function(index, $sub) {
maxHeight = Math.max(maxHeight, obj.getHeight($sub));
});
$underlay.css('height', maxHeight);
}
},
'hide.smapi': function(e, menu) {
var obj = $mainMenu.data('smartmenus');
if (!obj.visibleSubMenus.length) {
$underlay.fadeOut(250);
}
}
});
});
CSS:
#main-menu-underlay {
display: none;
position: absolute;
background: red;
}
Please let me know if you have any questions.
.
