PDA

View Full Version : Fine Tuning Multiple Mega Menus



macboyCanada
01-25-2013, 10:08 PM
1) Script Title: DD Mega Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/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
01-26-2013, 07:08 AM
For the first issue, try the solution in this post:

http://www.dynamicdrive.com/forums/showthread.php?64579-How-can-I-made-JKmegamenu-hold-its-position&p=261167#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
01-28-2013, 07:38 PM
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
01-28-2013, 08:30 PM
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/showthread.php?72400-Mega-Menu-Drop-downs-positioning&p=288126#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 (http://www.dynamicdrive.com/forums/attachment.php?attachmentid=4847&d=1355681650)

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
01-28-2013, 10:18 PM
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 (http://www.adventureswithkd.com/dd_MenuTest.html)

rel attribute set to left (http://www.adventureswithkd.com/dd_MenuTest2.html)



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

jscheuer1
01-29-2013, 12:04 PM
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
01-29-2013, 05:34 PM
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
01-29-2013, 06:00 PM
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
01-29-2013, 06:27 PM
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.

490949104911

jscheuer1
01-30-2013, 04:36 AM
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.

macboyCanada
01-30-2013, 08:03 AM
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
01-31-2013, 03:53 PM
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);
});
});