Fine Tuning Multiple Mega Menus

[macboyCanada]

1) Script Title: DD Mega Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ddmegamenu.htm

3) I've got two issues I'm trying to sort out here and I'm sure it's simple or there's a better way about it. Is there a way to make all the menus occupy the same width and height and drop down in the same space as opposed to aligned with the 'button'? The layout is centered with CSS.

Secondly, I've got these appearing one after the other but I can't get rid of the space between them. I don't need them touching I just want them about 2 pixels apart.

Test page can be seen here:
http://www.adventureswithkd.com/dd_MenuTest.html

Thanks in advance on your help with my first post a DD.

[jscheuer1]

For the first issue, try the solution in this post:

http://www.dynamicdrive.com/forums/s...167#post261167

Only of course apply it to ddmegamenu.js (the user in that thread had renamed the file). Use a text only editor like NotePad to edit the file.

For the second, if you mean the spacing between The top level button images, that's controlled here in the ddmegamenu.css file (around line #127):

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

If you want only 2px between them, make that 11px be 1px. You might also consider getting rid of the border. Again, use a text only editor like NotePad to edit the file.

[macboyCanada]

Thanks John. Sorry if this is a duplicate post - I went in to edit the last reply and it disappeared? I think I need to step away from the keyboard ; )

Anyway, thanks again, not sure whyI didn't see that CSS there and at least play with it. Must have just been fatigued? I'll go with that.

Regarding the positioning of the menus however....I was unable to find any real correlation between the samples in the link you provided and the .js in my files. Now that I've got things sitting with each other correctly, all of the megamenus will need to shoot over to the left edge of the content region set up in that page. I've reposted new files with the CSS adjusted but you can see the menu location is still an issue.

Thanks again in advance for any help/insight.

[jscheuer1]

Sorry, I was looking through the archives in a hurry. That's not the post I was looking for. Try the version of the script from this post:

http://www.dynamicdrive.com/forums/s...126#post288126

The first part of the post is tailored to the person I'm working with in that thread. The link to the updated javascript is near the end of that post. I will include it here as well (right click and 'Save As'):

ddmegamenu.js

I'm not 100% sure it will take care of your issue. It might have been too markup specific for the user who requested it. Even if it doesn't work out, leave up a demo of it for me to look at. It can probably be easily tweaked.

The browser cache may need to be cleared and/or the page refreshed to see changes.

[macboyCanada]

Wow John - what a resource you are. Thanks again goes without saying. I thought perhaps the change dictated that I change the rel attribute to [base] but I don't think that was correct (it didn't seem to do anything). I thought perhaps the new .js changed the [left] behaviour so I tried that as well and it seems close but too far left now - so perhaps the same issue but different.

I've posted both [base] and [left] files including your new .js file.

rel attribute set to base

rel attribute set to left



I'm amazed this code makes 'sense' to people like you........

[jscheuer1]

In the head of the page, after the end of the last ddmegamenu.docinit, put this:

jQuery(function($){
	var smo = $('.content').offset().left;
	$('.megawrapper').each(function(){
		$(this).children('div:first').css({left: smo - $(this).offset().left});
	});
});

Works with either demo.

The browser cache may need to be cleared and/or the page refreshed to see changes.

Playing around with it a little more, I found adding 5 was a nice effect:

jQuery(function($){
	var smo = $('.content').offset().left;
	$('.megawrapper').each(function(){
		$(this).children('div:first').css({left: smo - $(this).offset().left + 5});
	});
});

[macboyCanada]

I'm sorry I appear to be an invalid here - thank you for being so thorough and patient.....Last time I checked I knew how to copy and paste ; )

For some reason it didn't seem to be affecting it's behaviour at all for me. I suspected maybe browser support but tried in Safari, FireFox and Chrome. Note, in my limited diagnostic ability I thought "maybe it didn't do anything because now I need to strip the [base] and [left]", so in actuality both files were now the same. I then realize this so I put them back and noticed the file with the rel attribute [left] WAS doing something different. It was shooting to the right by about 10-15%. If I put in the jQuery containing the + 5 it seemed to revert back to default alignment. In the [base] version the same thing - it seemed to shoot the drop downs to the right 10-15%.

What the heck am I doing wrong here? I updated the HTML files online again.

(Now how do you send beer through this forum......)

[jscheuer1]

Oh, sorry. I had a typo. For the second one it's:

jQuery(function($){
	var smo = $('.content').offset().left;
	$('.megawrapper').each(function(){
		$(this).children('div:first').css({left: smo - $(this).offset().left + 5});
	});
});

I'm going to edit the original.

However, if you tried the first one and it didn't work, we have other problems. Probably just timing. If so, then try:

jQuery('window').load(function(){
	var $ = jQuery, smo = $('.content').offset().left;
	$('.megawrapper').each(function(){
		$(this).children('div:first').css({left: smo - $(this).offset().left + 5});
	});
});

[macboyCanada]

I don't know what to say (well, 'thanks' of course). But still no luck. Here's some screen shots of what I'm getting and some showing what I'd like in case there's been a big misunderstanding right from the start. I'm sure that's not the case but doesn't hurt to be sure.

[jscheuer1]

I was getting fed up with this one too. The code I was giving you when pasted into the console worked, but obviously not when executed on the page. This works on the page:

jQuery(function($){
	function relocate(){
		$(this).unbind('mouseenter.relocate');
		var smo = $('.content').offset().left;
		$('.megawrapper').each(function(){
			$(this).children('div:first').css({left: smo - $(this).offset().left + 5});
		});
	}
	$('.solidblockmenu a').bind('mouseenter.relocate', relocate);
	$(window).resize(function(){
		$('.solidblockmenu a').unbind('mouseenter.relocate').bind('mouseenter.relocate', relocate);
	});
});

Again, put that on the page right after the last ddmegamenu.docinit command.

But it's markup specific, so not ideal. At least it works. When I have more time I will see if there's a way to make it more generic and perhaps even integrate it with the script itself.