Slide out menu : Menu « GUI Components « JavaScript DHTML






Slide out menu

 /* http://youngpup.net/2001/ypslideoutmenus 
It is offered completely free, for any purpose, under the Academic Free License.
*/


<html>
<head>
<script language="javascript">
/* 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("<style type=\"text/css\">");
    for(var id in ypSlideOutMenu.Registry){
        document.writeln(ypSlideOutMenu.Registry[id].css);
    }
    document.writeln("</style>");
};

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(){};
</script>

<script language="javascript">
  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();
</script><style type="text/css">
#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);}
</style><style type="text/css">
  /* 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;
  }
</style></head>





<body><div id="menubar">
  <a id="act0" href="http://ypslideoutmenus.sourceforge.net/ideas/" onmouseover="ypSlideOutMenu.showMenu('menu1')" onmouseout="ypSlideOutMenu.hideMenu('menu1')" title="onmouseover=ypSlideOutMenu.showMenu('menu1'); onmouseout=ypSlideOutMenu.hideMenu('menu1')">ideas</a>&nbsp;
  <a id="act1" href="http://ypslideoutmenus.sourceforge.net/experiments/" onmouseover="ypSlideOutMenu.showMenu('menu2')" onmouseout="ypSlideOutMenu.hideMenu('menu2')" title="onmouseover=ypSlideOutMenu.showMenu('menu2'); onmouseout=ypSlideOutMenu.hideMenu('menu2')">experiments</a>&nbsp;
  <a class="" id="act2" href="http://ypslideoutmenus.sourceforge.net/components/" onmouseover="ypSlideOutMenu.showMenu('menu3')" onmouseout="ypSlideOutMenu.hideMenu('menu3')" title="onmouseover=ypSlideOutMenu.showMenu('menu3'); onmouseout=ypSlideOutMenu.hideMenu('menu3')">components</a>&nbsp;
  <a id="act3" href="http://ypslideoutmenus.sourceforge.net/writings/" onmouseover="ypSlideOutMenu.showMenu('menu4')" onmouseout="ypSlideOutMenu.hideMenu('menu4')" title="onmouseover=ypSlideOutMenu.showMenu('menu4'); onmouseout=ypSlideOutMenu.hideMenu('menu4')">writings</a>
</div>


<div style="visibility: hidden;" id="menu1Container">
  <div style="top: -59px;" id="menu1Content" class="menu">
    <div class="options">
      <a href="http://ypslideoutmenus.sourceforge.net/ideas/javascript_debugger/">javascript debugger</a>
      <a href="http://ypslideoutmenus.sourceforge.net/ideas/onRollMouseWheel/">monitoring the mouse-wheel</a>
      <a href="http://ypslideoutmenus.sourceforge.net/ideas/resizeable_flash_textfield/">resizable text fields in flash</a>
    </div>
  </div>
</div>

<div style="visibility: hidden;" id="menu2Container">
  <div style="top: -40px;" id="menu2Content" class="menu">
    <div class="options">
      <a href="http://ypslideoutmenus.sourceforge.net/experiments/email_wiretap/">email wiretap</a>
      <a href="http://ypslideoutmenus.sourceforge.net/experiments/beatnik_piano/">beatnik piano</a>
    </div>
  </div>
</div>

<div style="visibility: hidden;" id="menu3Container">
  <div style="top: -97px;" id="menu3Content" class="menu">
    <div class="options">
      <a href="http://ypslideoutmenus.sourceforge.net/components/ypXmlTree/">ypXmlTree</a>
      <a href="http://ypslideoutmenus.sourceforge.net/components/ypRing/">ypRing</a>
      <a href="http://ypslideoutmenus.sourceforge.net/components/ypBranch/">ypBranch</a>
      <a href="http://ypslideoutmenus.sourceforge.net/components/ypSlideOutMenu/">ypSlideOutMenu</a>
      <a href="http://ypslideoutmenus.sourceforge.net/components/ypSimpleScroll/">ypSimpleScroll</a>
    </div>
  </div>
</div>

<div style="visibility: hidden;" id="menu4Container">
  <div style="top: -21px;" id="menu4Content" class="menu">
    <div class="options">
      <a href="http://ypslideoutmenus.sourceforge.net/writings/i_want_my_DOM/">i want my DOM, dammit</a>
    </div>
  </div>
</div>

<div id="about">
  <code>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.</code>
</div></body></html>

           
       








Related examples in the same category

1.Application Menubar Example
2.[DOM Menu] :: Example 1 :: Horizontal Menu
3.[DOM Menu] :: Example 2 :: KDE Keramik Style Menu
4.[DOM Menu] :: Example 3: Brainjar.com 'Revenge of the Menubar' Style Menu
5.[DOM Menu] Example 4: Vertical Menu
6.[DOM Menu] :: Example 5 :: Two Menus
7.[DOM Menu] :: Example 6 :: Flash Hiding
8.Menu bar for an inner fake window
9.Fly in Menu item
10.Not too fancy menu with toolbar
11.Custom Contextual Menu(content sensitive)
12.Drop-Down Menus
13.Menu with sound
14.Menu based on Javascript
15.popup menu (content sensitive menu)
16.Complete Source Code for the Menu
17.Dynamic menu: fly in
18.Menu and submenu
19.Slide out menu with i18N
20.Menu: XP, win 98 style
21.Simple drop-down menu example with layer
22.Build a simple fancy menu
23.Add/delete menu items
24.Customizable layout: customize menu layout
25.Vertical layout menu
26.Easy skinable menu with CSS
27.Menu Item properties
28.Direct link menu
29.Context menu: popup menu
30.Black Menu
31.Dropdown menu