Smartmenu with Lightbox overlay ?

[neild]

Has anyone tried to integrate a lightbox overlay effect to work with the menu?

example menu-http://www.marksandspencer.com/

I have tried but with limited success.. using a <div id=”menu-overlay”></div> just outside the menu

and with a little javascript…

var $menu = $(‘#mainmenu’);
var $overlay = $(‘#menu-overlay’);

$menu.bind(‘mouseenter’,function(){
var $this = $(this);
$overlay.stop(true,true).fadeTo(200, 0.2);
$this.addClass(‘hovered’);
}).bind(‘mouseleave’,function(){
var $this = $(this);
$this.removeClass(‘hovered’);
$overlay.stop(true,true).fadeTo(200, 0).css(‘display’,’none’);
})

The problem is once the menu is clicked and loads onto a new page the smartmenu does not intialize until the mouse is moved..but the overlay effect does, so rectifying either would be a solution..

I need to get the overlay only to fire once the smartmenu is intialized does anyone have any thoughts?

Thanks

[admin]

Hi, do you have a live demo? As far as I can see, http://www.marksandspencer.com/ does not use the SmartMenus plugin.

[admin]

But in general the following should work fine (simplified example):

var $menu = $('#main-menu'),
	$overlay = $('#menu-overlay');
$menu.bind({
	'beforeshow.smapi': function(e, menu) {
		$overlay.show();
	},
	'hide.smapi': function(e, menu) {
		var obj = $(this).data('smartmenus');
		if (obj.visibleSubMenus.length == 0) {
			$overlay.hide();
		}
	}
});

[neild]

Brilliant thanks..works like a charm.

Thanks for your help.. great plugin!!!!

[admin]

Np, cheers!

[Author]

Posts