PDA

View Full Version : DD Mega Menu Drop Top (not Down)



Sirius
07-03-2012, 10:52 PM
1) Script Title: DD Mega Menu

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

3) Describe problem:

Hi Community,

i'm looking for a menu like Redhat (http://redhat.com). If u click on a button (products, solutions, etc.) the submenu drops to top. The DD Mega Menu is the same but the subcontent drops down and not top.

If it possible to drops the submenu on top?

ajfmrf
07-03-2012, 11:13 PM
here is another alternative perhaps

http://www.cssplay.co.uk/menus/dl-pullup.html

http://www.cssplay.co.uk/menus/final_pullup.html

Sirius
07-03-2012, 11:23 PM
Yes something like that but there is no download link or I can't find one. The Mega Menu DD comes to the Redhat reference a little closer.

bernie1227
07-04-2012, 02:19 AM
I found a previous thread here:
here (http://www.dynamicdrive.com/forums/showthread.php?t=45715)
it's the same kind of idea, theres a link on the bottom left of the page when you run it. You'll have to download the files (the CSS are the only important things to do with drop top)

ddadmin
07-04-2012, 04:19 AM
Try the below modified .js file, which should invert the mega menu's drop position so it drops up instead.

Sirius
07-04-2012, 08:07 AM
Great ddadmin - it works. Thx.

Sirius
07-04-2012, 01:25 PM
Another problem with the establishment of the script: I want the submenu for each exit completely - based on the entire menu - is aligned to the left and has a fixed width. Just as the website is in the menu on the Redhat.

I tried the "ddmegamenu.js" line 45 to change that but unfortunately without success.

ddadmin
07-04-2012, 07:10 PM
Try the below modified .js file to get the drop down menus to always be aligned to the left edge of the parent menu. As far as altering the width of the drop down menus, try doing that directly inside the markup for it, ie:


<div id="jkmenu" class="mega solidblocktheme" style="width:800px">

<p style="margin:5px 0 10px 0"><b>Visit the following main content areas of JavaScript Kit:</b></p>

<div class="column">
<ul>
<li><a href="http://www.javascriptkit.com" rel="freescripts">Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Tutorials</a></li>
<li><a href="http://www.javascriptkit.com">Free Java Applets</a></li>
</ul>
</div>
<div class="column">
<ul>
<li><a href="http://www.javascriptkit.com">JavaScript Tutorials</a></li>
<li><a href="http://www.javascriptkit.com">DHTML Tutorials</a></li>
<li><a href="http://www.javascriptkit.com">Web Design Tutorials</a></li>
</ul>
</div>
<br style="clear:left" />
<p>Need help with JavaScript? <a href="http://www.codingforums.com">Coding Forums</a> should be your next stop!</p>

</div>

Sirius
07-05-2012, 12:33 AM
Thank you admin, very good job.

But now all drop menus depend entirely on the left - my website is centered. With a "margin-left: 100px" I get no further, because the screen resolutions are different. It should extend all the drop menus at the alignment point of the first menu-open point (see attachment).

ddadmin
07-10-2012, 01:31 AM
Please post a link to the page on your site that contains the problematic script so we can check it out.

Sirius
07-15-2012, 04:19 PM
http://r2d2.conami.org/equinux/

There is just a developer version...

ddadmin
07-16-2012, 06:14 AM
Inside the ".blockmenu" selectors of your CSS file, give it a position:relative so it becomes the anchor for the drop down menus to be based on:


.blockmenu {
font: 17px;
font-weight: bold;
text-transform: uppercase;
width: 100%;
margin: 0;
padding: 0;
float: left;
overflow: hidden;
position:relative;
}

Sirius
07-16-2012, 10:10 AM
Thanks a lot, u are the best. Dynamic Drive rocks.

mulaus
03-22-2013, 03:49 PM
Hi

thank you for this...

Is it possible to use two mega menu script? , one the normal drop down in header and one drop up in footer ?

mulaus
03-24-2013, 12:46 PM
i need to use 2 mega menu in my site

1. The Normal Drop Down DD Mega Menu in the header

2. The Drop Up DD Mega Menu in the footer

what do i need to change in the js code in order make it both work

I tried to change the js for drop up like this but it does not work


/* DD Mega Menu
* Created: June 13th, 2011 by DynamicDrive.com. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

// July 27th, 11': Added ability to activate menu via "click" of the mouse, on top of the default "mouseover".

jQuery.noConflict()

jQuery.extend(jQuery.easing, { //see http://gsgd.co.uk/sandbox/jquery/easing/
easeOutBack:function(x, t, b, c, d, s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}
})

var ddmegamenu-up={
startzindex:100,
wrapperoffset:[10,25], //additional width and height to add to outer wrapper of drop down menus to accomodate CSS drop down shadow, if any
ismobile:navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null, //boolean check for popular mobile browsers

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
$submenu.wrap('<div class="megawrapper" style="z-index:'+ddmegamenu-up.startzindex+';position:absolute;top:0;left:0;visibility:hidden;"><div style="position:absolute;overflow:hidden;left:0;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-up.wrapperoffset[0], height:$submenu.outerHeight()+ddmegamenu-up.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-up.wrapperoffset[0] : 0), top:offset.top-$wrapper.outerHeight(), zIndex:++ddmegamenu-up.startzindex})
$submenu.stop().animate({top:$wrapper.outerHeight()-$submenu.outerHeight()}, s.dur, s.easing) //animate submenu into view
if (setting.trigger=="click" && !ddmegamenu-up.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-up.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)
},

docinit:function(setting){
jQuery(function($){ //on document.ready
ddmegamenu-up.init(setting)
})
}

}









<script src="ddmegamenu.js">

/***********************************************
* DD Mega Menu (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<script>

ddmegamenu.docinit({
menuid:'solidmenu',
dur:200 //<--no comma after last setting
})
</script>

<script src="ddmegamenu-up.js">
</script>

<script>
ddmegamenu-up.docinit({
menuid:'w3c',
trigger:'click',
showdelay:300,
easing:'easeOutBack',
dur:200 //<--no comma after last setting
})


</script>

mulaus
03-27-2013, 02:43 AM
manage to find the solution

use this

ddmegamenu-up.js


/* DD Mega Menu
* Created: June 13th, 2011 by DynamicDrive.com. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

// July 27th, 11': Added ability to activate menu via "click" of the mouse, on top of the default "mouseover".

jQuery.noConflict()

jQuery.extend(jQuery.easing, { //see http://gsgd.co.uk/sandbox/jquery/easing/
easeOutBack:function(x, t, b, c, d, s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}
})

var dddmegamenu={
startzindex:100,
wrapperoffset:[10,25], //additional width and height to add to outer wrapper of drop down menus to accomodate CSS drop down shadow, if any
ismobile:navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null, //boolean check for popular mobile browsers

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.menuid1)
$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
$submenu.wrap('<div class="megawrapper" style="z-index:'+dddmegamenu.startzindex+';position:absolute;top:0;left:0;visibility:hidden;"><div style="position:absolute;overflow:hidden;left:0;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()+dddmegamenu.wrapperoffset[0], height:$submenu.outerHeight()+dddmegamenu.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()-dddmegamenu.wrapperoffset[0] : 0), top:offset.top-$wrapper.outerHeight(), zIndex:++dddmegamenu.startzindex})
$submenu.stop().animate({top:$wrapper.outerHeight()-$submenu.outerHeight()}, s.dur, s.easing) //animate submenu into view
if (setting.trigger=="click" && !dddmegamenu.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 (dddmegamenu.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)
},

docinit:function(setting){
jQuery(function($){ //on document.ready
dddmegamenu.init(setting)
})
}

}













<script>
dddmegamenu.docinit({
menuid1:'Testing',
trigger:'click',
showdelay:300,
easing:'easeOutBack',
dur:200 //<--no comma after last setting

})

</script>