Mega Menu Drop downs positioning

[Ptron]

1) Script Title: ddmegamenu.js

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

3) Describe problem: My issue is the drop downs are anchored to the parent items but I need them to be anchored to the left edge of the main menu as I need them to be the same width as the main menu. Is this possible with this script?

I am building this menu here [broken link removed]

Is this possible?

PS. I had posted a similar thread last month but it hasn't gotten any replies recently so I thought I would post again.

[bernie1227]

Hi Ptron,
Unfortunately the link to your site is broken, it says:

Sorry that page no longer exists

A to the question, I'm not really sure what you mean, a quick diagram in ms paint could go a long way in explaining what you want.

[jscheuer1]

Have you edited the script? Looks like you have but that the negative left style that creates has no effect:

				var os=(/\[base\]/.test($anchor.attr('rel'))?-this.parentNode.offsetLeft:0) //check for rel="submenuid[left]" to indicate submenu should be based to the left of the parent
				$submenu.wrap('<div class="megawrapper" style="z-index:'+ddmegamenu.startzindex+';position:absolute;top:0;left:0;visibility:hidden"><div style="position:absolute;overflow:hidden;left:'+(os)+';top:0;width:100%;height:100%;"></div></div>')

Even if it did work, I think it would need adjustment as the negative values it's generating are too great, which if it worked would result in the menu appearing too far to the left. But to have any effect at all the units (px in this case) must be specified, in the second line from the above, this part:

 . . . ow:hidden;left:'+(os)+';top:0;wi . . .

should be:

 . . . ow:hidden;left:' + os + 'px;top:0;wi . . .

Once you have that, to get it to line up correctly, I would try changing the first line to:

var os=(/\[base\]/.test($anchor.attr('rel'))?-this.parentNode.offsetLeft+$mainmenu.offset().left:0)

[vwphillips]

I am still working on this

but

http://www.vicsjavascripts.org.uk/AA...nu/121203B.htm

[jscheuer1]

.

Your page is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

That said, I tested my theory and it works but there's a horizontal scrollbar. So I changed it a little. those two lines from my first post:

				var os=(/\[base\]/.test($anchor.attr('rel'))?-this.parentNode.offsetLeft:0) //check for rel="submenuid[left]" to indicate submenu should be based to the left of the parent
				$submenu.wrap('<div class="megawrapper" style="z-index:'+ddmegamenu.startzindex+';position:absolute;top:0;left:0;visibility:hidden"><div style="position:absolute;overflow:hidden;left:'+(os)+';top:0;width:100%;height:100%;"></div></div>')

should be changed to:

				var os=(/\[base\]/.test($anchor.attr('rel'))?-this.parentNode.offsetLeft+$mainmenu.offset().left:0) //check for rel="submenuid[left]" to indicate submenu should be based to the left of the parent
				$submenu.wrap('<div class="megawrapper" style="z-index:'+ddmegamenu.startzindex+';margin-left:'+os+'px;position:absolute;top:0;left:0;visibility:hidden"><div style="position:absolute;overflow:hidden;left:0;top:0;width:100%;height:100%;"></div></div>')

Or you can download the edited script (right click and 'Save As'):

ddmegamenu.js

and use that instead of your current version.

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

[Ptron]

Hi John thank you for your help.

Yes I had been playing around with the code a little bit based on stuff I could find online.
This is just my test page credit has been reinstated but will also be on the actual live site when its done.

I will test out your suggestions and let you know, thanks again.

Hi vwphillips, your demo looks like what I need with mine thank you for sharing.

Hi bernie1227 sorry my bad I was actually using the 404 page as a demo, soffr for the confusion.

[Ptron]

Hi John,

just wanted to let you know that I have implemented your changes and they work perfectly. Thank you I really appreciate your help.

Cheers