Extended jQuery Gooey Menu with Dropdown

1) Script Title: Extended jQuery Gooey Menu with Dropdown

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

3) Describe problem:

Hi There,

Please help me for adding new dropdown menu in this script or wherever need changes in css or js file.

I am using jQuery Gooey Menu uses the popular "lava lamp" effect to create CSS menus with a moving gooey background effect using GEL BUTTON.

I want to add a dropdown menu with this menu.
Code for want to use dropdown in this menu.

HTML Code:

<div class="header"> <ul id="gooeymenu2" class="solidblockmenu"> <li><a href="index.html">Home</a></li>  <li><a href="about_us.html">About Us</a></li> <li><a href="objective.html">Objective</a></li> <li><a href="member.html">Member</a></li> <li><a href="funding.html">Funding / Legal Status</a></li> <li><a href="donation.html">Donation</a></li> <li><a href="projects.html">Projects</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="contact.html">Contacts</a></li> </ul> <script type="text/javascript"> gooeymenu.setup({id:'gooeymenu2', selectitem:0, fx:'easeOutBack'}) </script> </div>

for example where i want to use this menu : http://www.ajks.org/

Thanks.

For some reason I cannot see the question again. Are you wanting a drop down under certain items? And do you want the Gooey button to be on the sub elements?

What happened to his original post?

Quote:

Originally Posted by Deadweight

What happened to his original post?

I am not sure, but I have straightened it out.

@Highlender, your post was auto-moderated again after you edited it. This can happen sometimes if you have frequent edits, or if your posts have certain keywords that the filter thinks are "spam"-like. It also happens quite often if you edit a post which was moderated previously, so I would suggest you avoid editing your original post again.

Let me know if you have any further problems.

Hi,
Actually i posted the question but edit frequently , and it will be auto-moderated. so you can see the problem, can you give solutions for this.
Thanks

Try to submit your posts only when they are ready, so you don't have to go back and edit as often.
If you click [Go Advanced], you can see a preview of your post before you submit it, and make any corrections then.

If your post is moderated, please be patient; we review/approve moderated posts as quickly as possible (usually within a few hours).

any solution for above question ??

I asked you a question first? Do you want the button to float over the sub-elements or would you just like the elements to just have a normal drop down.

Thanks for replying Mr. DEADWEIGH

I want to the elements to just have a normal drop down.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <style type="text/css"> /*<![CDATA[*/ hr{ margin:50px 0; color:#eee; } ul li.active{ /*IE6 hack- hide gooey effect from that browser*/ _visibility: hidden; /*IE6 rule*/ } /* ######### Gel Menu CSS ######### */ ul.gelbuttonmenu{ position:relative; padding: 0; margin: 0; margin-bottom:1em; text-align: center; //set value to "left", "center", or "right"*/ } ul.gelbuttonmenu li{ display: inline; } ul.gelbuttonmenu li a{ color: black; font-weight:bold; padding: 10px; /*make sure padding is sufficient that the height of the link is enough to fully show the gel button*/ margin-right: 20px; /*spacing between each menu link*/ text-decoration: none; } ul.gelbuttonmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/ position:absolute; width:0px; background:lightblue; background:url(gelbuttonleft.gif) top left no-repeat, url(gelbuttonright.gif) top right no-repeat, url(gelbuttoncenter.gif) top center repeat-x; } .submenu { position:absolute;z-Index:101;width:200px;height:200px;margin-Top:5px;background-Color:#FFFFCC; } /*]]>*/ </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script > /* jQuery Gooey Menu * Created: April 7th, 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 */ jQuery.noConflict() jQuery.extend(jQuery.easing, {easeOutBack:function(x, t, b, c, d, s){ //see http://gsgd.co.uk/sandbox/jquery/easing/ if (s == undefined) s = 1.70158; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; } }) var gooeymenu={ effectmarkup: '<li class="active"></li>', setup:function(usersetting){ jQuery(function($){ //on document.ready function snapback(dur){ if ($selectedlink.length>0) $effectref.dequeue().animate({left:$selectedlink.position().left, width:$selectedlink.outerWidth()}, dur, setting.fx) } var setting=jQuery.extend({fx:'easeOutBack', fxtime:500, snapdelay:300}, usersetting) var $menu=$('#'+setting.id).find('li:eq(0)').parents('ul:eq(0)') //select main menu UL var $menulinks=$menu.find('li a') var $effectref=$(gooeymenu.effectmarkup).css({top:$menulinks.eq(0).position().top, height:$menulinks.eq(0).outerHeight(), zIndex:-1}).appendTo($menu) //add trailing effect LI to the menu UL $effectref.css({left:-$menu.offset().left-$effectref.outerWidth()-5}) //position effect LI behind the left edge of the window if (typeof setting.selectitem!="undefined"){ //if setting.selectitem defined var $selectedlink=$menulinks.removeClass('selected').eq(setting.selectitem).addClass('selected') } else{ var $selectedlink=$menulinks.filter('.selected:eq(0)') //find item with class="selected" manually defined } setting.defaultselectedBool=$selectedlink.length $menulinks.mouseover(function(){ clearTimeout(setting.snapbacktimer) var $target=$(this) //alert($target.position().left+" "+$target.get(0).offsetLeft) $effectref.dequeue().animate({left:$target.position().left, width:$target.outerWidth()}, setting.fxtime, setting.fx) if (setting.defaultselectedBool==0) //if there is no default selected menu item $selectedlink=$target //set current mouseover element to selected element }) if ($selectedlink.length>0){ snapback(0) $menu.mouseleave(function(){ setting.snapbacktimer=setTimeout(function(){ snapback(setting.fxtime) }, setting.snapdelay) }) } $(window).bind('resize', function(){ snapback(setting.fxtime) }) }) } }/*********************************************** * Gooey Menu Script (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> <link rel="stylesheet" type="text/css" href="gooeymenu.css" /> </head> <body> <ul id="gooeymenu1" class="gelbuttonmenu"> <li> <a href="http://www.dynamicdrive.com/">Home</a> </li> <li> <a href="http://www.dynamicdrive.com/style/">CSS Codes</a> <div class="submenu" >Sub Menu 1</div> </li> <li> <a href="http://www.dynamicdrive.com/forums/">Forums</a> </li> <li> <a href="http://tools.dynamicdrive.com">Tools</a> <div class="submenu" >Sub Menu 3</div> </li> <li> <a href="http://www.javascriptkit.com/">JavaScript</a> </li> <li> <a href="http://www.cssdrive.com">CSS Gallery</a> </li> </ul> <script> var zxcSubMenu={ init:function(o){ var id=o.ParentID,p=document.getElementById(id),clds=p?p.getElementsByTagName('LI'):[]; if (clds[0]){ var sm,a,z0=0; o.ary=[] for (;z0<clds.length;z0++){ sm=this.bycls(o.SubMenuClass,'*',clds[z0])[0]; if (sm){ sm.style.left=sm.style.top='-3000px'; a=[clds[z0],sm]; this.addevt(clds[z0],'mouseover','show',o,a); this.addevt(sm,'mouseover','show',o,a); this.addevt(clds[z0],'mouseout','hide',o,a); this.addevt(sm,'mouseout','hide',o,a); document.body.appendChild(sm); o.sm=a; } } } }, show:function(o,sm){ sm!=sm?this.hide(o,o.sm):null; clearTimeout(sm[2]); var p=this.pos(sm[0]); sm[1].style.left=p[0]+'px'; sm[1].style.top=p[1]+sm[0].offsetHeight+'px'; o.sm=sm; }, hide:function(o,sm){ sm[2]=setTimeout(function(){ sm[1].style.top='-3000px'; },200); }, pos:function(obj){ var rtn=[0,0]; while(obj){ rtn[0]+=obj.offsetLeft; rtn[1]+=obj.offsetTop; obj=obj.offsetParent; } return rtn; }, addevt:function(o,t,f,p,p1,p2){ var oop=this; o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1,p2);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); }):null; }, bycls:function(n,t,o){ for (var o=o||document.body,c=o.getElementsByTagName(t||'*'),a=[],z0=0; z0<c.length;z0++){ if((' '+c[z0].className+' ').match(' '+n+' ')){ a.push(c[z0]); } } return a; } } zxcSubMenu.init({ ParentID:'gooeymenu1', SubMenuClass:'submenu' }); gooeymenu.setup({id:'gooeymenu1'}) </script> </body> </html>

Hello Again,

is there any way to write below code in separate *.js file and call here to reduce coding in main page

Code:

<script> var zxcSubMenu={ init:function(o){ var id=o.ParentID,p=document.getElementById(id),clds=p?p.getElementsByTagName('LI'):[]; if (clds[0]){ var sm,a,z0=0; o.ary=[] for (;z0<clds.length;z0++){ sm=this.bycls(o.SubMenuClass,'*',clds[z0])[0]; if (sm){ sm.style.left=sm.style.top='-3000px'; a=[clds[z0],sm]; this.addevt(clds[z0],'mouseover','show',o,a); this.addevt(sm,'mouseover','show',o,a); this.addevt(clds[z0],'mouseout','hide',o,a); this.addevt(sm,'mouseout','hide',o,a); document.body.appendChild(sm); o.sm=a; } } } }, show:function(o,sm){ sm!=sm?this.hide(o,o.sm):null; clearTimeout(sm[2]); var p=this.pos(sm[0]); sm[1].style.left=p[0]+'px'; sm[1].style.top=p[1]+sm[0].offsetHeight+'px'; o.sm=sm; }, hide:function(o,sm){ sm[2]=setTimeout(function(){ sm[1].style.top='-3000px'; },200); }, pos:function(obj){ var rtn=[0,0]; while(obj){ rtn[0]+=obj.offsetLeft; rtn[1]+=obj.offsetTop; obj=obj.offsetParent; } return rtn; }, addevt:function(o,t,f,p,p1,p2){ var oop=this; o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1,p2);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); }):null; }, bycls:function(n,t,o){ for (var o=o||document.body,c=o.getElementsByTagName(t||'*'),a=[],z0=0; z0<c.length;z0++){ if((' '+c[z0].className+' ').match(' '+n+' ')){ a.push(c[z0]); } } return a; } } zxcSubMenu.init({ ParentID:'gooeymenu2', SubMenuClass:'submenu' }); gooeymenu.setup({id:'gooeymenu2'}) </script> </body>

Like that example below:

Code:

<div class="header"> <ul id="gooeymenu2" class="solidblockmenu"> <li><a href="index.html">Home</a></li> <li><a href="about_us.html">About Us</a></li> <li><a href="objective.html">Objective</a></li> <li><a href="member.html">Member</a></li> <li><a href="funding.html">Funding / Legal Status</a></li> <li><a href="donation.html">Donation</a> <div class="submenu" ><a href="charity.html">Donation FCRA</a></div> </li> <li><a href="projects.html">Projects</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="contact.html">Contacts</a></li> </ul> <script type="text/javascript"> gooeymenu.setup({id:'gooeymenu2', selectitem:3, fx:'easeOutBack'}) </script>

The code in red can be removed from the page,
saved as a .js file and called from the header of the page

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <style type="text/css"> /*<![CDATA[*/ hr{ margin:50px 0; color:#eee; } ul li.active{ /*IE6 hack- hide gooey effect from that browser*/ _visibility: hidden; /*IE6 rule*/ } /* ######### Gel Menu CSS ######### */ ul.gelbuttonmenu{ position:relative; padding: 0; margin: 0; margin-bottom:1em; text-align: center; //set value to "left", "center", or "right"*/ } ul.gelbuttonmenu li{ display: inline; } ul.gelbuttonmenu li a{ color: black; font-weight:bold; padding: 10px; /*make sure padding is sufficient that the height of the link is enough to fully show the gel button*/ margin-right: 20px; /*spacing between each menu link*/ text-decoration: none; } ul.gelbuttonmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/ position:absolute; width:0px; background:lightblue; background:url(gelbuttonleft.gif) top left no-repeat, url(gelbuttonright.gif) top right no-repeat, url(gelbuttoncenter.gif) top center repeat-x; } .submenu { position:absolute;z-Index:101;width:200px;height:200px;margin-Top:5px;background-Color:#FFFFCC; } /*]]>*/ </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script > /* jQuery Gooey Menu * Created: April 7th, 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 */ jQuery.noConflict() jQuery.extend(jQuery.easing, {easeOutBack:function(x, t, b, c, d, s){ //see http://gsgd.co.uk/sandbox/jquery/easing/ if (s == undefined) s = 1.70158; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; } }) var gooeymenu={ effectmarkup: '<li class="active"></li>', setup:function(usersetting){ jQuery(function($){ //on document.ready function snapback(dur){ if ($selectedlink.length>0) $effectref.dequeue().animate({left:$selectedlink.position().left, width:$selectedlink.outerWidth()}, dur, setting.fx) } var setting=jQuery.extend({fx:'easeOutBack', fxtime:500, snapdelay:300}, usersetting) var $menu=$('#'+setting.id).find('li:eq(0)').parents('ul:eq(0)') //select main menu UL var $menulinks=$menu.find('li a') var $effectref=$(gooeymenu.effectmarkup).css({top:$menulinks.eq(0).position().top, height:$menulinks.eq(0).outerHeight(), zIndex:-1}).appendTo($menu) //add trailing effect LI to the menu UL $effectref.css({left:-$menu.offset().left-$effectref.outerWidth()-5}) //position effect LI behind the left edge of the window if (typeof setting.selectitem!="undefined"){ //if setting.selectitem defined var $selectedlink=$menulinks.removeClass('selected').eq(setting.selectitem).addClass('selected') } else{ var $selectedlink=$menulinks.filter('.selected:eq(0)') //find item with class="selected" manually defined } setting.defaultselectedBool=$selectedlink.length $menulinks.mouseover(function(){ clearTimeout(setting.snapbacktimer) var $target=$(this) //alert($target.position().left+" "+$target.get(0).offsetLeft) $effectref.dequeue().animate({left:$target.position().left, width:$target.outerWidth()}, setting.fxtime, setting.fx) if (setting.defaultselectedBool==0) //if there is no default selected menu item $selectedlink=$target //set current mouseover element to selected element }) if ($selectedlink.length>0){ snapback(0) $menu.mouseleave(function(){ setting.snapbacktimer=setTimeout(function(){ snapback(setting.fxtime) }, setting.snapdelay) }) } $(window).bind('resize', function(){ snapback(setting.fxtime) }) }) } }/*********************************************** * Gooey Menu Script (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> <link rel="stylesheet" type="text/css" href="gooeymenu.css" /> </head> <body> <ul id="gooeymenu1" class="gelbuttonmenu"> <li> <a href="http://www.dynamicdrive.com/">Home</a> </li> <li> <a href="http://www.dynamicdrive.com/style/">CSS Codes</a> <div class="submenu" >Sub Menu 1</div> </li> <li> <a href="http://www.dynamicdrive.com/forums/">Forums</a> </li> <li> <a href="http://tools.dynamicdrive.com">Tools</a> <div class="submenu" >Sub Menu 3</div> </li> <li> <a href="http://www.javascriptkit.com/">JavaScript</a> </li> <li> <a href="http://www.cssdrive.com">CSS Gallery</a> </li> </ul> <script> var zxcSubMenu={ init:function(o){ var id=o.ParentID,p=document.getElementById(id),clds=p?p.getElementsByTagName('LI'):[]; if (clds[0]){ var sm,a,z0=0; o.ary=[] for (;z0<clds.length;z0++){ sm=this.bycls(o.SubMenuClass,'*',clds[z0])[0]; if (sm){ sm.style.left=sm.style.top='-3000px'; a=[clds[z0],sm]; this.addevt(clds[z0],'mouseover','show',o,a); this.addevt(sm,'mouseover','show',o,a); this.addevt(clds[z0],'mouseout','hide',o,a); this.addevt(sm,'mouseout','hide',o,a); document.body.appendChild(sm); o.sm=a; } } } }, show:function(o,sm){ sm!=sm?this.hide(o,o.sm):null; clearTimeout(sm[2]); var p=this.pos(sm[0]); sm[1].style.left=p[0]+'px'; sm[1].style.top=p[1]+sm[0].offsetHeight+'px'; o.sm=sm; }, hide:function(o,sm){ sm[2]=setTimeout(function(){ sm[1].style.top='-3000px'; },200); }, pos:function(obj){ var rtn=[0,0]; while(obj){ rtn[0]+=obj.offsetLeft; rtn[1]+=obj.offsetTop; obj=obj.offsetParent; } return rtn; }, addevt:function(o,t,f,p,p1,p2){ var oop=this; o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1,p2);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); }):null; }, bycls:function(n,t,o){ for (var o=o||document.body,c=o.getElementsByTagName(t||'*'),a=[],z0=0; z0<c.length;z0++){ if((' '+c[z0].className+' ').match(' '+n+' ')){ a.push(c[z0]); } } return a; } } zxcSubMenu.init({ ParentID:'gooeymenu1', SubMenuClass:'submenu' }); gooeymenu.setup({id:'gooeymenu1'}) </script> </body> </html>

I have added some animation

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <style type="text/css"> /*<![CDATA[*/ hr{ margin:50px 0; color:#eee; } ul li.active{ /*IE6 hack- hide gooey effect from that browser*/ _visibility: hidden; /*IE6 rule*/ } /* ######### Gel Menu CSS ######### */ ul.gelbuttonmenu{ position:relative; padding: 0; margin: 0; margin-bottom:1em; text-align: center; //set value to "left", "center", or "right"*/ } ul.gelbuttonmenu li{ display: inline; } ul.gelbuttonmenu li a{ color: black; font-weight:bold; padding: 10px; /*make sure padding is sufficient that the height of the link is enough to fully show the gel button*/ margin-right: 20px; /*spacing between each menu link*/ text-decoration: none; } ul.gelbuttonmenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/ position:absolute; width:0px; background:lightblue; background:url(gelbuttonleft.gif) top left no-repeat, url(gelbuttonright.gif) top right no-repeat, url(gelbuttoncenter.gif) top center repeat-x; } .submenu { position:absolute;z-Index:101;width:200px;height:200px;margin-Top:5px;background-Color:#FFFFCC; } /*]]>*/ </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script > /* jQuery Gooey Menu * Created: April 7th, 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 */ jQuery.noConflict() jQuery.extend(jQuery.easing, {easeOutBack:function(x, t, b, c, d, s){ //see http://gsgd.co.uk/sandbox/jquery/easing/ if (s == undefined) s = 1.70158; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; } }) var gooeymenu={ effectmarkup: '<li class="active"></li>', setup:function(usersetting){ jQuery(function($){ //on document.ready function snapback(dur){ if ($selectedlink.length>0) $effectref.dequeue().animate({left:$selectedlink.position().left, width:$selectedlink.outerWidth()}, dur, setting.fx) } var setting=jQuery.extend({fx:'easeOutBack', fxtime:500, snapdelay:300}, usersetting) var $menu=$('#'+setting.id).find('li:eq(0)').parents('ul:eq(0)') //select main menu UL var $menulinks=$menu.find('li a') var $effectref=$(gooeymenu.effectmarkup).css({top:$menulinks.eq(0).position().top, height:$menulinks.eq(0).outerHeight(), zIndex:-1}).appendTo($menu) //add trailing effect LI to the menu UL $effectref.css({left:-$menu.offset().left-$effectref.outerWidth()-5}) //position effect LI behind the left edge of the window if (typeof setting.selectitem!="undefined"){ //if setting.selectitem defined var $selectedlink=$menulinks.removeClass('selected').eq(setting.selectitem).addClass('selected') } else{ var $selectedlink=$menulinks.filter('.selected:eq(0)') //find item with class="selected" manually defined } setting.defaultselectedBool=$selectedlink.length $menulinks.mouseover(function(){ clearTimeout(setting.snapbacktimer) var $target=$(this) //alert($target.position().left+" "+$target.get(0).offsetLeft) $effectref.dequeue().animate({left:$target.position().left, width:$target.outerWidth()}, setting.fxtime, setting.fx) if (setting.defaultselectedBool==0) //if there is no default selected menu item $selectedlink=$target //set current mouseover element to selected element }) if ($selectedlink.length>0){ snapback(0) $menu.mouseleave(function(){ setting.snapbacktimer=setTimeout(function(){ snapback(setting.fxtime) }, setting.snapdelay) }) } $(window).bind('resize', function(){ snapback(setting.fxtime) }) }) } }/*********************************************** * Gooey Menu Script (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> <link rel="stylesheet" type="text/css" href="gooeymenu.css" /> </head> <body> <ul id="gooeymenu1" class="gelbuttonmenu"> <li> <a href="http://www.dynamicdrive.com/">Home</a> </li> <li> <a href="http://www.dynamicdrive.com/style/">CSS Codes</a> <div class="submenu" >Sub Menu 1</div> </li> <li> <a href="http://www.dynamicdrive.com/forums/">Forums</a> </li> <li> <a href="http://tools.dynamicdrive.com">Tools</a> <div class="submenu" >Sub Menu 3</div> </li> <li> <a href="http://www.javascriptkit.com/">JavaScript</a> </li> <li> <a href="http://www.cssdrive.com">CSS Gallery</a> </li> </ul> <script> var zxcSubMenu={ init:function(o){ var id=o.ParentID,ms=o.Animate,p=document.getElementById(id),clds=p?p.getElementsByTagName('LI'):[]; if (clds[0]){ var sm,a,z0=0; o.ary=[]; o.ms=typeof(ms)=='number'&&ms>20?ms:1000; for (;z0<clds.length;z0++){ sm=this.bycls(o.SubMenuClass,'*',clds[z0])[0]; if (sm){ sm.style.left=sm.style.top='-3000px'; a=[clds[z0],sm,0,0]; this.addevt(clds[z0],'mouseover','show',o,a); this.addevt(sm,'mouseover','show',o,a); this.addevt(clds[z0],'mouseout','hide',o,a); this.addevt(sm,'mouseout','hide',o,a); document.body.appendChild(sm); o.sm=a; } } } }, show:function(o,sm){ sm!=sm?this.hide(o,o.sm):null; clearTimeout(sm[2]); var p=this.pos(sm[0]); sm[1].style.left=p[0]+'px'; sm[1].style.top=p[1]+sm[0].offsetHeight+'px'; this.animate(o,sm,sm[3],sm[1].offsetHeight,new Date(),o.ms); o.sm=sm; }, hide:function(o,sm){ var oop=this; sm[2]=setTimeout(function(){ oop.animate(o,sm,sm[3],0,new Date(),o.ms); },200); }, animate:function(o,a,f,t,srt,mS){ clearTimeout(a[4]); var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f; if (isFinite(n)){ a[3]=Math.max(0,n); a[1].style.clip='rect(0px,'+a[1].offsetWidth+'px,'+a[3]+'px,0px)'; } if (ms<mS){ a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10); } else { a[3]=t; a[1].style.clip='rect(0px,'+a[1].offsetWidth+'px,'+a[3]+'px,0px)'; t==0?a[1].style.top='-3000px':null; } }, pos:function(obj){ var rtn=[0,0]; while(obj){ rtn[0]+=obj.offsetLeft; rtn[1]+=obj.offsetTop; obj=obj.offsetParent; } return rtn; }, addevt:function(o,t,f,p,p1,p2){ var oop=this; o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1,p2);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); }):null; }, bycls:function(n,t,o){ for (var o=o||document.body,c=o.getElementsByTagName(t||'*'),a=[],z0=0; z0<c.length;z0++){ if((' '+c[z0].className+' ').match(' '+n+' ')){ a.push(c[z0]); } } return a; } } zxcSubMenu.init({ ParentID:'gooeymenu1', // the unique ID name of the parent UL. (string) SubMenuClass:'submenu', // the common calss name of the sub menus. (string) Animate:1000 //(optional) the animation duration in millisec. (number, default = 1000) }); gooeymenu.setup({id:'gooeymenu1'}) </script> </body> </html>