expanderande meny?

Hej!
Klickar man på "sök" eller "genvägar" här i menyn ovanför expanderas en tjusig ruta.
Hur får man till en sådan? =)

Är det själva expanderingen du är intresserad av, d.v.s. den dynamiska ändringen i höjd- och sidled?

Ja, precis. Så att en ruta med dess innehåll expanderas vid klick.
(det är kanske css som gäller då)

Ett enkelt exempel utifrån wF:s kod:

<script type="text/javascript">
var div, tim;
function activate()
{
  div = document.getElementById("div");
  div.style.display = "block";
  div.style.clip = "rect(0px,0px,0px,0px)";
  divResize(0,0);
}
function divResize(xx,yy)
{
  if (xx < div.offsetWidth) xx+=5;
  if (yy < div.offsetHeight) yy+=5;
  div.style.clip = "rect(auto,"+xx+"px,"+yy+"px,auto)";
  if (xx >= div.offsetWidth && yy >= div.offsetHeight){
    window.clearTimeout(tim);
    return;
  }
  tim = window.setTimeout("divResize("+xx+","+yy+")", 1);
}
</script>
<h1 style="font-size:14px; display:inline; background-color:#eee; padding:5px; cursor:pointer" onclick="activate()">Click me!</h1>
<div id="div" style="position:absolute; margin-top:10px; border:1px solid #777; padding:3px; display:none">
  <h3>rubrik</h3>
  <ul>
    <li>punkt 1</li>
    <li>punkt 2</li>
    <li>punkt 3</li>
    <li>punkt 4</li>
    <li>punkt 5</li>
    <li>punkt 6</li>
  </ul>
</div>

Se där! :-) En sak bara, "fönstret" som ovanstående script skapar fösvinner inte då man klickar utanför fönstret.

<script type="text/javascript">
var div, tim, curr = {pnt:0,node:0};
function activate(p)
{
  div = document.getElementById("div");
  if (curr.node && curr.node != div) curr.node.style.display = "none";
  curr.pnt = p;
  curr.node = div;
  div.style.display = "block";
  div.style.clip = "rect(0px,0px,0px,0px)";
  divResize(0,0);
}
function divResize(xx,yy)
{
  if (xx < div.offsetWidth) xx+=5;
  if (yy < div.offsetHeight) yy+=5;
  div.style.clip = "rect(auto,"+xx+"px,"+yy+"px,auto)";
  if (xx >= div.offsetWidth && yy >= div.offsetHeight){
    window.clearTimeout(tim);
    return;
  }
  tim = window.setTimeout("divResize("+xx+","+yy+")", 1);
}
document.onclick = function(e)
{
  var elm = e ? e.target : window.event ? window.event.srcElement : null;
  if (!elm || !curr.node) return;
  do {
    if (elm == curr.pnt || elm == curr.node) return;
  } while (elm = elm.parentNode);
  curr.node.style.display = "none";
  curr.pnt = curr.node = null;
}
</script>
<h1 style="font-size:14px; display:inline; background-color:#eee; padding:5px; cursor:pointer" onclick="activate(this)">Click me!</h1>
<div id="div" style="position:absolute; margin-top:10px; border:1px solid #777; padding:3px; display:none">
  <h3>rubrik</h3>
  <ul>
    <li>punkt 1</li>
    <li>punkt 2</li>
    <li>punkt 3</li>
    <li>punkt 4</li>
    <li>punkt 5</li>
    <li>punkt 6</li>
  </ul>
</div>

Tack tack =)