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