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[*/
.pop {
position:absolute;z-Index:101;left:100px;top:-500px;width:120px;background-Color:#FFFFCC;text-Align:center;padding:5px;border:solid red 1px;
}
/*]]>*/
</style></head>
<body>
<a class="zxcDropID:m1;Fade:500;EventType:click;OffsetX:50;OffsetY:0;Group:pets;" >LINK</a>
<a class="zxcDropID:m2;Group:pets;" >LINK</a>
<img class="zxcDropID:m3;" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="img" width="100" />
<div id="m1" class="pop" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" width="100" />
</div>
<div id="m2" class="pop" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" width="100" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" width="100" />
</div>
<div id="m3" class="pop" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="img" width="100" />
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Simple Drop Element (27-March-2013)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcDrop={
init:function(){
var els=document.body.getElementsByTagName('*'),s,i,o,z0=0,z0a;
for (;z0<els.length;z0++){
if (els[z0].className&&els[z0].className.match('zxcDropID:')){
s=els[z0].className.split(';');
o={obj:els[z0]};
for (z0a=0;z0a<s.length;z0a++){
i=s[z0a].indexOf(':');
if (i>2){
o[s[z0a].substring(0,i).toLowerCase()]=s[z0a].substring(i+1);
}
}
o.pop=document.getElementById(o.zxcdropid);
if (o.pop){
this[o.zxcdropid]=o;
if (o.group){
this[o.group]=o;
}
document.body.appendChild(o.pop);
o.pop.style.top='-3000px';
o.ms=isFinite(o.fade*1)?o.fade*1:1000;
o.osx=isFinite(o.offsetx*1)?o.offsetx*1:(o.obj.offsetWidth-o.pop.offsetWidth)/2;
o.osy=isFinite(o.offsety*1)?o.offsety*1:o.obj.offsetHeight+3;
o.ary=[o.pop,0,false];
if (o.eventtype=='click'){
this.addevt(o.obj,'click','show',o,true);
this.addevt(document,'click','click',o);
}
else {
this.addevt(o.obj,'mouseover','show',o,true);
this.addevt(o.pop,'mouseover','show',o,true);
this.addevt(o.obj,'mouseout','show',o,false);
this.addevt(o.pop,'mouseout','show',o,false);
}
}
}
}
},
show:function(o,ud,e){
var oop=this,p=oop.pos(o.obj),c=e&&e.type=='click';
if (o.group){
if (oop[o.group]!=o&&oop[o.group].ary[1]!=0){
oop.show(oop[o.group],false);
}
this[o.group]=o;
}
clearTimeout(o.to);
o.to=setTimeout(function(){
o.ary[2]=!o.ary[2];
oop.animate(o,o.ary,o.ary[1],(!c&&ud)||(c&&o.ary[2])?100:0,new Date(),o.ms);
if (ud){
o.pop.style.left=p[0]+o.osx+'px';
o.pop.style.top=p[1]+o.osy+'px';
}
oop.lst=o;
},ud?10:500);
},
click:function(o,ud,e){
var obj=e.target?e.target:e.srcElement;
while (obj.parentNode){
if (obj==o.obj||obj==o.obj){
return false;
}
obj=obj.parentNode;
}
if (o.ary[1]>0){
this.show(o,false)
}
},
animate:function(o,ary,f,t,srt,mS){
clearTimeout(ary[3]);
var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
ary[1]=Math.max(n,0);
oop.opc(ary[0],ary[1]);
}
if (ms<mS){
ary[3]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS); },10);
}
else {
ary[1]=t;
oop.opc(ary[0],t);
}
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
opc:function(o,n){
o.style.filter='alpha(opacity='+n+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
n==0?o.style.top='-3000px':null
},
addevt:function(o,t,f,p1,p2){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p1,p2,e);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p1,p2,e); });
}
}
}
zxcDrop.init();
/*]]>*/
</script>
</body>
</html>
Need Help with drop down menu please
Reply With Quote
Bookmarks