PDA

View Full Version : Extended jQuery Gooey Menu with Dropdown



Highlender
03-08-2014, 05:25 AM
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.

<div class="header">
<ul id="gooeymenu2" class="solidblockmenu">
<li><a href="index.html">Home</a></li>

<!--Here i want to use drop down menu -->

<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><!--/ div class="header" -->


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

Thanks.

Deadweight
03-08-2014, 07:54 AM
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?

Deadweight
03-08-2014, 07:55 AM
What happened to his original post?

traq
03-08-2014, 05:04 PM
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.

Highlender
03-09-2014, 07:37 PM
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

traq
03-09-2014, 08:00 PM
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).

Highlender
03-11-2014, 06:00 AM
any solution for above question ??

Deadweight
03-12-2014, 01:08 AM
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.

Highlender
03-12-2014, 03:41 AM
Thanks for replying Mr. DEADWEIGH

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

vwphillips
03-12-2014, 03:50 PM
<!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>

Highlender
03-12-2014, 06:59 PM
Hello Again,

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


<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:


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

vwphillips
03-13-2014, 10:21 AM
The code in red can be removed from the page,
saved as a .js file and called from the header of the page


<!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>

vwphillips
03-13-2014, 12:23 PM
I have added some animation


<!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>