<!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[*/
.banner {
position:absolute;left:0px;top:0px;width:100%;height:50px;background-Color:#FFCC66;
}
.banner UL{
}
.banner UL LI{
list-Style:none;display:inline;margin-Left:20px;width:200px
}
.drop {
position:absolute;left:0px;top:50px;width:100%;height:150px;background-Color:red;
}
.droplink {
float:left;width:100px;height:30px;background-Color:#FFFFCC;margin-Left:20px;margin-Top:10px;
}
.active {
background-Color:#CCFFCC;
}
/*]]>*/
</style></head>
<body>
<div id="banner" class="banner" >
<ul>
<li><div class="droplink" >Tom</div></li>
<li><div class="droplink" >Joe</div></li>
</ul>
<div class="drop" ></div>
<div class="drop" style="background-Color:green;" ></div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Drop Menu (19-September-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcDropMenu={
init:function(o){
var id=o.ID,ms=o.DropDuration,lkcls=o.LinkClass,obj=document.getElementById(id),objs=obj.getElementsByTagName('*'),cls,lary=[],ary=[],z0=0,z1=0;
for (;z0<objs.length;z0++){
cls=objs[z0].className;
if (cls){
if ((' '+cls+' ').indexOf(' '+lkcls+' ')>=0){
lary.push(objs[z0]);
}
if ((' '+cls+' ').indexOf(' '+o.DropClass+' ')>=0){
ary.push([objs[z0],0,objs[z0].offsetHeight,'dly'+z0]);
objs[z0].style.height='0px';
}
}
}
for (;z1<ary.length;z1++){
this.addevt(ary[z1][0],'mouseover','clear',id,z1);
this.addevt(ary[z1][0],'mouseout','toggle',id,-1);
if (lary[z1]){
ary[z1][4]=lary[z1];
this.addevt(lary[z1],'mouseover','toggle',id,z1);
this.addevt(lary[z1],'mouseout','close',id,500);
}
}
this['zxc'+id]={
ary:ary,
ms:typeof(ms)=='number'?ms:1000,
nu:-1,
cls:[lkcls,lkcls+' '+o.LinkActiveClass]
}
},
toggle:function(id,nu){
var o=this['zxc'+id];
if (o&&nu!==o.nu){
clearTimeout(o.dly);
if (o.ary[o.nu]){
clearTimeout(o.ary[o.nu][3]);
o.ary[o.nu][4].className=o.cls[0];
this.animate(o,o.ary[o.nu],o.ary[o.nu][1],0,new Date(),o.ms,nu);
o.nu=-1;
}
else if (o.ary[nu]){
o.ary[nu][4].className=o.cls[1];
this.open(o,nu);
}
}
},
open:function(o,nu){
clearTimeout(o.dly);
clearTimeout(o.ary[nu][3]);
this.animate(o,o.ary[nu],o.ary[nu][1],o.ary[nu][2],new Date(),o.ms);
o.nu=nu;
},
close:function(id,ms){
var o=this['zxc'+id],oop=this;
if (o){
o.dly=setTimeout(function(){ oop.toggle(id,-1); },ms||200);
}
},
clear:function(id){
var o=this['zxc'+id];
if (o){
clearTimeout(o.dly);
}
},
animate:function(o,ary,f,t,srt,mS,nu){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
ary[1]=Math.max(now,0);
ary[0].style.height=ary[1]+'px';
}
if (ms<mS){
o[ary[3]]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS,nu); },10);
}
else {
ary[1]=t;
ary[0].style.height=t+'px';
if (o.ary[nu]){
o.ary[nu][4].className=o.cls[1];
this.open(o,nu);
}
}
},
addevt:function(o,t,f,p,p1){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
}
}
}
zxcDropMenu.init({
ID:'banner', // the unique ID of the parent DIV. (string)
LinkClass:'droplink', // the common class name of the link elements. (string)
DropClass:'drop', // the common class name of the menu drop elements. (string)
LinkActiveClass:'active', //(optional) the additional class name of the active link elements. (string, default = no active class)
DropDuration:1000 //(optional) the drop duration in milli seconds. (number, default = 1000)
});
/*]]>*/
</script>
</body>
</html>