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
    Posts
  • #3179
    toben
    Participant

    Hello,

    I have two questions.

    An image to explain my questions:
    https://pl.vc/33aue

    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,
    toben

    #3198
    admin
    Keymaster

    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.

    #3256
    toben
    Participant

    Hi,

    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)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?