/* http://youngpup.net/2001/ypslideoutmenus
It is offered completely free, for any purpose, under the Academic Free License.
*/
/* http://youngpup.net/2001/ypslideoutmenus
It is offered completely free, for any purpose, under the Academic Free License.
*/
ypSlideOutMenu.Registry=[];
ypSlideOutMenu.aniLen=250;
ypSlideOutMenu.hideDelay=1000;
ypSlideOutMenu.minCPUResolution=10;
function ypSlideOutMenu(id,_2,_3,_4,_5,_6){
this.ie=document.all?1:0;
this.ns4=document.layers?1:0;
this.dom=document.getElementById?1:0;this.css="";
if(this.ie||this.ns4||this.dom){
this.id=id;
this.dir=_2;
this.orientation=_2=="left"||_2=="right"?"h":"v";
this.dirType=_2=="right"||_2=="down"?"-":"+";
this.dim=this.orientation=="h"?_5:_6;
this.hideTimer=false;this.aniTimer=false;
this.open=false;this.over=false;
this.startTime=0;this.gRef="ypSlideOutMenu_"+id;
eval(this.gRef+"=this");
ypSlideOutMenu.Registry[id]=this;
var d=document;
var _8="";
_8+="#"+this.id+"Container{visibility:hidden;";
_8+="left:"+_3+"px;";_8+="top:"+_4+"px;";
_8+="overflow:hidden;z-index:10000;}";
_8+="#"+this.id+"Container,#"+this.id+"Content{position:absolute;";
_8+="width:"+_5+"px;";
_8+="height:"+_6+"px;";
_8+="clip:rect(0"+_5+""+_6+"0);";
_8+="}";
this.css=_8;
this.load();
}
}
ypSlideOutMenu.writeCSS=function(){
document.writeln("");
for(var id in ypSlideOutMenu.Registry){
document.writeln(ypSlideOutMenu.Registry[id].css);
}
document.writeln("");
};
ypSlideOutMenu.prototype.load=function(){
var d=document;
var _10=this.id+"Container";
var _11=this.id+"Content";
var _12=this.dom?d.getElementById(_10):this.ie?d.all[_10]:d.layers[_10];
if(_12){
var _13=this.ns4?_12.layers[_11]:this.ie?d.all[_11]:d.getElementById(_11);
}
var _14;
if(!_12||!_13){
window.setTimeout(this.gRef+".load()",100);
}else{
this.container=_12;this.menu=_13;
this.style=this.ns4?this.menu:this.menu.style;
this.homePos=eval("0"+this.dirType+this.dim);
this.outPos=0;this.accelConst=(this.outPos-this.homePos)/ypSlideOutMenu.aniLen/ypSlideOutMenu.aniLen;
if(this.ns4){
this.menu.captureEvents(Event.MOUSEOVER|Event.MOUSEOUT);
}
this.menu.onmouseover=new Function("ypSlideOutMenu.showMenu('"+this.id+"')");
this.menu.onmouseout=new Function("ypSlideOutMenu.hideMenu('"+this.id+"')");
this.endSlide();
}
};
ypSlideOutMenu.showMenu=function(id){
var reg=ypSlideOutMenu.Registry;
var obj=ypSlideOutMenu.Registry[id];
if(obj.container){
obj.over=true;
for(menu in reg){
if(id!=menu){
ypSlideOutMenu.hide(menu);
}
}
if(obj.hideTimer){
reg[id].hideTimer=window.clearTimeout(reg[id].hideTimer);
}
if(!obj.open&&!obj.aniTimer){
reg[id].startSlide(true);
}
}
};
ypSlideOutMenu.hideMenu=function(id){
var obj=ypSlideOutMenu.Registry[id];
if(obj.container){
if(obj.hideTimer){
window.clearTimeout(obj.hideTimer);
}
obj.hideTimer=window.setTimeout("ypSlideOutMenu.hide('"+id+"')",ypSlideOutMenu.hideDelay);
}
};
ypSlideOutMenu.hideAll=function(){
var reg=ypSlideOutMenu.Registry;
for(menu in reg){
ypSlideOutMenu.hide(menu);
if(menu.hideTimer){
window.clearTimeout(menu.hideTimer);
}
}
};
ypSlideOutMenu.hide=function(id){
var obj=ypSlideOutMenu.Registry[id];
obj.over=false;
if(obj.hideTimer){
window.clearTimeout(obj.hideTimer);
}
obj.hideTimer=0;
if(obj.open&&!obj.aniTimer){
obj.startSlide(false);
}
};
ypSlideOutMenu.prototype.startSlide=function(_21){
this[_21?"onactivate":"ondeactivate"]();
this.open=_21;
if(_21){
this.setVisibility(true);
}
this.startTime=(new Date()).getTime();
this.aniTimer=window.setInterval(this.gRef+".slide()",ypSlideOutMenu.minCPUResolution);
};
ypSlideOutMenu.prototype.slide=function(){
var _22=(new Date()).getTime()-this.startTime;
if(_22>ypSlideOutMenu.aniLen){
this.endSlide();
}else{
var d=Math.round(Math.pow(ypSlideOutMenu.aniLen-_22,2)*this.accelConst);
if(this.open&&this.dirType=="-"){
d=-d;
}else{
if(this.open&&this.dirType=="+"){
d=-d;
}else{
if(!this.open&&this.dirType=="-"){
d=-this.dim+d;
}else{
d=this.dim+d;
}
}
}
this.moveTo(d);
}
};
ypSlideOutMenu.prototype.endSlide=function(){
this.aniTimer=window.clearTimeout(this.aniTimer);
this.moveTo(this.open?this.outPos:this.homePos);
if(!this.open){
this.setVisibility(false);
}
if((this.open&&!this.over)||(!this.open&&this.over)){
this.startSlide(this.over);
}
};
ypSlideOutMenu.prototype.setVisibility=function(_24){
var s=this.ns4?this.container:this.container.style;
s.visibility=_24?"visible":"hidden";
};
ypSlideOutMenu.prototype.moveTo=function(p){
this.style[this.orientation=="h"?"left":"top"]=this.ns4?p:p+"px";
};
ypSlideOutMenu.prototype.getPos=function(c){
return parseInt(this.style[c]);
};
ypSlideOutMenu.prototype.onactivate=function(){};
ypSlideOutMenu.prototype.ondeactivate=function(){};
var menus = [
new ypSlideOutMenu("menu1", "down", 5, 80, 170, 59),
new ypSlideOutMenu("menu2", "down", 57, 80, 170, 40),
new ypSlideOutMenu("menu3", "down", 147, 80, 170, 97),
new ypSlideOutMenu("menu4", "down", 237, 80, 170, 21)
]
for (var i = 0; i < menus.length; i++) {
menus[i].onactivate = new Function("document.getElementById('act" + i + "').className='active';");
menus[i].ondeactivate = new Function("document.getElementById('act" + i + "').className='';");
}
ypSlideOutMenu.writeCSS();
#menu1Container{visibility:hidden;left:5px;top:80px;overflow:hidden;z-index:10000;}#menu1Container,#menu1Content{position:absolute;width:170px;height:59px;clip:rect(0170590);}
#menu2Container{visibility:hidden;left:57px;top:80px;overflow:hidden;z-index:10000;}#menu2Container,#menu2Content{position:absolute;width:170px;height:40px;clip:rect(0170400);}
#menu3Container{visibility:hidden;left:147px;top:80px;overflow:hidden;z-index:10000;}#menu3Container,#menu3Content{position:absolute;width:170px;height:97px;clip:rect(0170970);}
#menu4Container{visibility:hidden;left:237px;top:80px;overflow:hidden;z-index:10000;}#menu4Container,#menu4Content{position:absolute;width:170px;height:21px;clip:rect(0170210);}
/* just basic text formatting - nothing special */
@import "/_common/demo.css";
body {
font-size:11px;
font-family:arial, sans-serif;
color:#444444;
}
#menubar {
position:absolute;
width:450px;
left:5px;
top:55px;
background-color:#F9F1C8;
border:1px solid #AD5800;
padding:2px;
}
#menubar a {
color:#AD5800;
letter-spacing:1px;
border:1px solid #F9F1C8;
padding-left:5px;
padding-right:5px;
text-decoration:none;
}
#menubar a.active {
border-bottom-color:#CCC599;
border-right-color:#CCC599;
border-left-color:#FFFFFF;
border-top-color:#FFFFFF;
}
.menu .options {
margin-right:1px;
margin-bottom:1px;
border:1px solid #AD5800;
background-color:#F9F1C8;
}
.menu a {
color:#AD5800;
display:block;
padding:2px 10px;
text-decoration:none;
background-color:transparent;
}
.menu a:hover {
background-color:#AD5800;
color:#FAF7E1;
}
#about {
position:absolute;
left:5px;
top:200px;
}
ideas
experiments
components
writings
Note that this sample doesn't look good in
older browsers (even ie5!) that don't support all of CSS. This has
nothing to do with the component, I've just implemented some extra CSS
here to make it look cool. The same could be achieved with TABLE el
ements, but I just didn't feel like making them.