ddmegamenu.js Positioning

1) Script Title: ddmegamenu.js

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...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?

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.

Hello, thanks for your update. I am new to these forums so I appologise for the double post. Cheers

Code:

---

        init:function(setting){
                var $=jQuery
                var s=$.extend({fx:'slide', easing:'easeInOutSine', dur:'normal', hidedelay:200}, setting)
                if (s.fx=="none") //if fx is disabled, bypass animation
                        s.dur=0
                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
                                        clearTimeout($submenu.data('timer').hide)
                                        var offset=($submenu.data('istopmenu'))? $anchor.offset() : $anchor.position()
                                        if ($submenu.data('istopmenu')){
                                                $anchors.removeClass('selected')
                                                $anchor.addClass('selected')
                                        }
                                        $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.data('timer').hide=setTimeout(function(){
                                                $submenu.stop().animate({top:-$submenu.outerHeight()}, s.dur, function(){$wrapper.css({visibility:'hidden'})}) //animate submenu out of view and hide wrapper DIV
                                                $anchor.removeClass('selected')
                                        }, s.hidedelay)
                                })
                                $anchor.click(function(e){
                                        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
                                                clearTimeout($submenu.data('timer').hide)
                                })
                                $wrapper.bind('mouseleave click', function(e){ //when mouse moves OUT or CLICKs on submenu wrapper
                                        $submenu.data('timer').hide=setTimeout(function(){
                                                $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
                                                $anchor.removeClass('selected')
                                        }, s.hidedelay)
                                })
                                buildmenu($submenu.find('a[rel]')) //build next level sub menus
                        })
                }
                buildmenu($anchors)
        },

---

Code:

---

<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>
</ul>

---

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?

Cheers

Have you got a link to your site?

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.

Cheers

I don't suppose anyone has any ideas about this?