Advanced Search

Results 1 to 8 of 8

Thread: ddmegamenu.js Positioning

  1. #1
    Join Date
    Dec 2012
    Location
    Australia
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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?

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,154
    Thanks
    261
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Dec 2012
    Location
    Australia
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,707
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Dec 2012
    Location
    Australia
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,883
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    Have you got a link to your site?
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  7. #7
    Join Date
    Dec 2012
    Location
    Australia
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #8
    Join Date
    Dec 2012
    Location
    Australia
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

Similar Threads

  1. Need help with IE 7 and IE 8 issues with ddmegamenu nav
    By logionweb in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 11-15-2012, 10:54 PM
  2. ddmegamenu
    By ajohnb in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-07-2012, 04:48 PM
  3. DDMegaMenu hide on click
    By Hazneliel in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-24-2011, 07:31 PM
  4. ddmegamenu issue in IE6
    By jimmycw74 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-22-2011, 11:32 AM
  5. positioning
    By bitbob in forum CSS
    Replies: 1
    Last Post: 05-16-2005, 04:48 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •