---
title: "expanderande meny?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/153869-expanderande-meny"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "reka1"
published: "2006-11-17T10:19:01.000Z"
updated: "2006-11-20T13:40:03.000Z"
replies: 6
views: 541
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/153869-expanderande-meny"
---

# expanderande meny?

## #1 — reka1, 2006-11-17T10:19Z

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?  =)

Permalänk: https://www.webforum.nu/p/153869

## #2 — Peter S, 2006-11-17T17:09Z

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

Permalänk: https://www.webforum.nu/p/1899637

## #3 — reka1, 2006-11-18T02:21Z

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

Permalänk: https://www.webforum.nu/p/1899754

## #4 — Peter S, 2006-11-18T13:51Z

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>
```

Permalänk: https://www.webforum.nu/p/1899847

## #5 — reka1, 2006-11-20T07:35Z

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

Permalänk: https://www.webforum.nu/p/1900240

## #6 — Peter S, 2006-11-20T11:46Z

```
<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>
```

Permalänk: https://www.webforum.nu/p/1900293

## #7 — reka1, 2006-11-20T13:40Z

Tack tack =)

Permalänk: https://www.webforum.nu/p/1900311

---

Tråden på webben: https://www.webforum.nu/amne/javascript/153869-expanderande-meny