View Full Version : ddmegamenu.js Positioning

12-01-2012, 04:16 PM
1) Script Title: ddmegamenu.js

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

3) Describe problem: HI, this is a great script my only issue is the drop downs are anchored to the parent items but I need them to be anchored to the left hand side of the main menu as I need them to be the same width as the main menu.

Is this possible?

12-01-2012, 04:25 PM
Ptron, I have deleted your other post in the other thread. Posting a new topic for a new question is better.

The reason this post didn't show up immediately was because it was flagged by our automated spam filter. It's approved now (and you did nothing wrong). If another post doesn't appear for a while it may be for the same reason. We'll approve it as soon as we see it.

Let us know if you have any questions about that, and otherwise back to your question. Now that the post is visible I hope you'll have an answer soon.

12-01-2012, 11:28 PM
Hello, thanks for your update. I am new to these forums so I appologise for the double post. Cheers

12-02-2012, 09:52 AM
var $=jQuery
var s=$.extend({fx:'slide', easing:'easeInOutSine', dur:'normal', hidedelay:200}, setting)
if (s.fx=="none") //if fx is disabled, bypass animation
var $mainmenu=$('#'+s.menuid)
$anchors=($mainmenu.attr('rel'))? $mainmenu : $mainmenu.find('a[rel]')
function buildmenu($anchors){
$anchors.each(function(){ //loop through anchor links
var $anchor=$(this)
var $submenu=$('#'+$anchor.attr('rel').replace(/\[\w+\]/, '')) //extract "submenuid" from rel="submenuid[orientation]" to reference submenu
var orienttoleft=/\[left\]/.test($anchor.attr('rel')) //check for rel="submenuid[left]" to indicate submenu should be left aligned
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>')
.css({visibility:'inherit', top:-$submenu.outerHeight()}) //set submenu's top pos so it's out of view intially
.data('timer', {}) //add timer data object to submenu object
var $wrapper=$submenu.closest('div.megawrapper').css({width:$submenu.outerWidth()+ddmegamenu.wrapperoffset[0], height:$submenu.outerHeight()+ddmegamenu.wrapperoffset[1]}) //reference outermost wrapper of submenu and set its dimensions
var $wrapperparent=$anchor.closest('div.megawrapper') //check if this anchor link is defined inside a submenu wrapper (nested menu)
if ($wrapperparent.length>0){ //if so
$wrapper.appendTo($wrapperparent) //move corresponding submenu wrapper to within its parent submenu wrapper
else{ //else if this submenu wrapper is topmost
$wrapper.appendTo(document.body) //move it so it's a child of document.body
$submenu.data('istopmenu', true) //indicate this is top level wrapper
$anchor.bind((setting.trigger=="click")? "click" : "mouseenter", function(e){ //when mouse clicks on or mouses over anchor
var offset=($submenu.data('istopmenu'))? $anchor.offset() : $anchor.position()
if ($submenu.data('istopmenu')){
$wrapper.css({visibility:'visible', left:offset.left-(orienttoleft? $wrapper.outerWidth()-$anchor.outerWidth()-ddmegamenu.wrapperoffset[0] : 0), top:offset.top+$anchor.outerHeight(), zIndex:++ddmegamenu.startzindex})
$submenu.stop().animate({top:0}, s.dur, s.easing) //animate submenu into view
if (setting.trigger=="click" && !ddmegamenu.ismobile) //returning false in mobile browsers seem to lead to strange behavior
return false
$anchor.mouseleave(function(){ //when mouse moves OUT anchor
$submenu.stop().animate({top:-$submenu.outerHeight()}, s.dur, function(){$wrapper.css({visibility:'hidden'})}) //animate submenu out of view and hide wrapper DIV
}, s.hidedelay)
if (ddmegamenu.ismobile) //on ipad/iphone, disable anchor link (those with a drop down menu) when clicked on (triggered by mouseover event on desktop), so menu is given a chance to appear
return false
$wrapper.mouseenter(function(){ //when mouse moves OVER submenu wrapper
$wrapper.bind('mouseleave click', function(e){ //when mouse moves OUT or CLICKs on submenu wrapper
$submenu.stop().animate({top:-$submenu.outerHeight()}, (e.type=="click")? 0 : s.dur, function(){$wrapper.css({visibility:'hidden'})}) //animate submenu out of view and hide wrapper DIV
}, s.hidedelay)
buildmenu($submenu.find('a[rel]')) //build next level sub menus

<ul id="solidmenu" class="solidblockmenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.javascriptkit.com" rel="jkmenu[base]">JavaScript v</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
<li><a href="http://www.cssdrive.com" rel="cssdrivemenu[base]">CSS Drive v</a></li>

12-02-2012, 12:27 PM
Hello vwphillips, thank you for your reply I appreciate it. However it hasn't worked for me.
It doesn't change anything in Chrome, Firefox or Safari and in IE7 it does change the alignment but it throws it all the way tot he left of the page but my site is centered.

So the code in red is where it needs to be changed?


12-02-2012, 02:18 PM
Have you got a link to your site?

12-03-2012, 11:01 PM
Hi Beverleyh,

Sorry for the late reply, link is here. http://www.kayeproject.com/test/mega-menu.html

I have updated the code from the code suggested above but still doesn't change the position of the drop downs.

I need them to all align left from the same spot as the one that drops down from Accounts and go full width of the menu.


12-12-2012, 12:10 AM
I don't suppose anyone has any ideas about this?