Fine Tuning Multiple Mega Menus

[macboyCanada]

If there was an emoticon for Choirs of Angels echoing from the heavens you would be CLOSE to the feeling I'm experiencing right now.

THANK YOU hardly comes close. Let's hope I don't break it all now in trying to stylize the individual DIVs. I promise to work cautiously.

Thanks again John. I will sleep peacefully tonight. http://www.adventureswithkd.com/dd_MenuTest4.html

[jscheuer1]

You're welcome. As promised I looked to see if it could be made more generic and/or incorporated into the script. That doesn't seem very feasible though. What I've come up with is a configurable version in case you need to change the key variables. As is it does exactly the same thing it did before. It simply makes it clear what items are variable that you might change if the markup changes. These are at the beginning and commented. Let me know if you have any questions about what they are:

jQuery(function($){
	var $alignwith = $('.content'); //jQuery object to align drop menus to
	var offset = 5; // offset from that object
	var $triggers = $('.solidblockmenu a'); // jQuery object of top level menu triggers
	function relocate(){
		$(this).unbind('mouseenter.relocate');
		var smo = $alignwith.offset().left;
		$('.megawrapper').each(function(){
			var $t = $(this);
			$t.children('div:first').css({left: smo - $t.offset().left + offset});
		});
	}
	$triggers.bind('mouseenter.relocate', relocate);
	$(window).resize(function(){
		$triggers.unbind('mouseenter.relocate').bind('mouseenter.relocate', relocate);
	});
});

And here's a slightly enhanced version that prevents a horizontal scrollbar when resizing the window down after having displayed one or more drop downs:

jQuery(function($){
	var $alignwith = $('.content'); //jQuery object to align drop menus to
	var offset = 5; // offset from that object
	var $triggers = $('.solidblockmenu a'); // jQuery object of top level menu triggers
	function relocate(){
		$(this).unbind('mouseenter.relocate').data('adjusted', true);
		var smo = $alignwith.offset().left;
		$('.megawrapper').each(function(){
			var $t = $(this);
			$t.children('div:first').css({left: smo - $t.offset().left + offset});
		});
	}
	$triggers.bind('mouseenter.relocate', relocate);
	$(window).resize(function(){
		$triggers.each(function(){
			if($(this).data('adjusted')){
				relocate.call(this);
				return false;
			}
		});
		$triggers.unbind('mouseenter.relocate').bind('mouseenter.relocate', relocate);
	});
});