Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

Background and submenu position

Home Forums Older releases 1.0.x Background and submenu position

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #3179


    I have two questions.

    An image to explain my questions:

    Is it possible to put a background-color to all expanded submenus (the red part in the image)? With a flexible height for the largest submenu.

    And, can the submenus start on top and not of the actual position of the current sub-item?

    Thanks in advance,


    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):


    $(function() {
    	var $mainMenu = $('#main-menu'),
    		$underlay = $('<div id="main-menu-underlay"></div>').appendTo('body');
    		'show.smapi': function(e, menu) {
    			var $sub = $(menu),
    				$li = $sub.parent(),
    				obj = $'smartmenus'),
    				mainMenuOffset = $mainMenu.offset();
    			// position deeper level sub menus right below the main menu
    			if ($sub.dataSM('level') > 2) {
    				$sub.css('margin-top', + obj.getHeight($mainMenu) - $li.offset().top - obj.getHeight($li));
    			// show/position underlay
    			$underlay.stop(true, true);
    			if (!$':visible')) {
    				$underlay.css({ 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 = $'smartmenus');
    			if (!obj.visibleSubMenus.length) {


    #main-menu-underlay {
    	display: none;
    	position: absolute;
    	background: red;

    Please let me know if you have any questions.



    sorry for my late answer, I had no time to test your code.

    This works perfectly!!! Thanks a lot!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘1.0.x’ is closed to new topics and replies.