Slide in from left

[PatsFan89]

Hello,

I wanna make my links slide in from the left, as shown in the demo here:

http://www.templatemonster.com/demo/38913.html

I'd like them to slide in from the left in a semi-transparent frame exactly as shown in the demo. Any help is greatly appreciated. Thanks.

[sbhmf]

Looks like you want a pull-down menu.

Another example of such a menu is here: http://www.javascriptworld.com/js4e/.../script01.html

...and its script may be found here: http://www.javascriptworld.com/js4e/...ript13.01.html

The site's author has more great stuff here: http://www.javascriptworld.com/js4e/scripts/index.html

I recommend his book as a great JavaScript primer.

Well, that should get you started...

[AndrewGSW]

Originally Posted by sbhmf

Looks like you want a pull-down menu.

Another example of such a menu is here: http://www.javascriptworld.com/js4e/.../script01.html

...and its script may be found here: http://www.javascriptworld.com/js4e/...ript13.01.html

The site's author has more great stuff here: http://www.javascriptworld.com/js4e/scripts/index.html

I recommend his book as a great JavaScript primer.

Well, that should get you started...

That site is about 10 years out of date - I wouldn't use it. It refers to the 4th edition of the book, but there is now an eight edition.

[vwphillips]

http://www.vicsjavascripts.org.uk/Dr.../DropInBox.htm

[AndrewGSW]

@vwphillips
Could you briefly describe the following code please? I assume it's using the time-interval in order to smooth out the animation.

animate:function(o,f,t,srt,mS,ud){
  clearTimeout(o.dly);
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   o.now=Math.max(now,f<0||t<0?now:0);
   o.obj.style[o.mde]=o.now+'px';
  }
  if (ms<mS){
   o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS,ud); },10);
  }
  else {
   o.now=t;
   o.obj.style[o.mde]=t+'px';
   if (ud){
    o.obj.style.visibility=o.msk.style.visibility='hidden';
   }
  }
 },

[vwphillips]

// parameter 0 = an object
// parameter 1 = start value
// parameter 2 = finsh value
// parameter 3 = a Date Object
// parameter 4 = the animate duration in milli seconds
// parameter 5 = a flag

animate:function(o,f,t,srt,mS,ud){
  clearTimeout(o.dly);
             //new Date()- the srt Date = ms = the time the function has been cycling
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;  // now = (start value - finish value)/the animate duration * new Date object + the finish value
  if (isFinite(now)){          // if now is a good number
   o.now=Math.max(now,f<0||t<0?now:0);  // make sure that now cannot be < 0 foe with and height etc ie can only be <0 if either the start value or finish value is less than 0
   o.obj.style[o.mde]=o.now+'px';       // if o.mode was 'width'  o.obj.style.width=o.now+'px';
  }
  if (ms<mS){         // cycle until the ms is geater than mS
   o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS,ud); },10);
  }
  else {
   o.now=t;  // the object now is set to the finish value as now may not be tottally accuate
   o.obj.style[o.mde]=t+'px'; // object.obj style is now accurate
   if (ud){    // if the flag is true do whatever
    o.obj.style.visibility=o.msk.style.visibility='hidden';
   }
  }
 },

[AndrewGSW]

@Vic Thank you. Andy.