¤ Clicca qui per visualizzare la demo... ¤

<style>
A.cassetto:hover {color: blue}
DIV.cassetto {font-family: verdana; font-size:11pt; font-weight:bold}
</style>

<SCRIPT LANGUAGE="JavaScript">

ie=document.all ? 1 : 0
n=document.layers ? 1 : 0
// Setta in pixel la parte visibile del cassetto
lshow=18
// Di quanti pixel vuoi che si sposti il cassetto ad ogni passo?
var move=10;
// Setta la velocità
menuSpeed=40
// Vuoi che il cassetto si sposti insieme allo scroll della pagina?
var moveOnScroll=true
// Adesso non cambiare più niente
var tim;

function makeMenu(obj,nest)
{
  nest=(!nest) ? '' : 'document.' + nest + '.'
  this.css=(n) ? eval(nest+'document.'+obj) : eval(obj+'.style')
  this.state=1
  this.go=0
  this.height=n ? this.css.document.height : eval(obj+'.offsetHeight')
  this.top=b_gettop
  this.obj = obj + "Object";
  eval(this.obj + "=this")
}

function b_gettop()
{
  var gleft=(n) ? eval(this.css.top) : eval(this.css.pixelTop);
  return gleft;
}

function moveMenu()
{
  if(!oMenu.state)
  {
      clearTimeout(tim)
      mIn()
  }
  else
  {
    clearTimeout(tim)
    mOut()
  }
}

function mIn()
{
  if(oMenu.top()>eval(scrolled)-oMenu.height+lshow)
  {
    oMenu.go=1
    oMenu.css.top=oMenu.top()-move
    tim=setTimeout("mIn()",menuSpeed)
  }
  else
  {
    oMenu.go=0
    oMenu.state=1
  }
}

function mOut()
{
  if(oMenu.top()<eval(scrolled))
  {
    oMenu.go=1
    oMenu.css.top=oMenu.top()+move
    tim=setTimeout("mOut()",menuSpeed)
  }
  else
  {
    oMenu.go=0
    oMenu.state=0
  }
}

function checkScrolled()
{
  if(!oMenu.go)
    oMenu.css.top=(!oMenu.state) ? eval(scrolled) : eval(scrolled)-oMenu.height+lshow
  if(n)
    setTimeout('checkScrolled()',30)
}

function menuInit()
{
  oMenu=new makeMenu('divMenu')
  scrolled=n ? "window.pageYOffset" : "document.body.scrollTop"
  oMenu.css.top=eval(scrolled)-oMenu.height+lshow
  oMenu.css.visibility='visible'
  if(moveOnScroll)
    ie ? window.onscroll=checkScrolled : checkScrolled();
}

onload = menuInit;

</SCRIPT>

<div class="cassetto" id="divMenu" style="position:absolute; top:0; left:30; height:100; width:200; visibility:hidden; background: url('sfondo.gif')">
<center>
<a class="cassetto" href="#">LINK1</a> <br>
<br>
<a class="cassetto" href="#">LINK2</a> <br>
<br>
<a class="cassetto" href="#">LINK3</a> <br>
<br>
<a class="cassetto" href="#">LINK4</a> <br>
<br>
<a class="cassetto" href="#">LINK5</a> <br>
<br>
<a class="cassetto" href="#">LINK6</a> <br>
<br>
</center>
<a href="javascript://" onClick="moveMenu()"><img src="logo.gif" border="0" width="200" height="20"></a></div>