---
title: "Dropdown meny med fördröjning"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/186501-dropdown-meny-med-fördröjning/page2"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Anders Gusten"
published: "2011-03-24T11:26:31.000Z"
updated: "2011-06-02T10:03:06.000Z"
replies: 22
views: 4543
page: 2
pages: 2
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/186501-dropdown-meny-med-fördröjning"
---

# Dropdown meny med fördröjning

_Sida 2 av 2._

## #21 — voigtann1, 2011-05-09T14:22Z

Vad är problemet? Du bygger ju bara ut HTML och se till att dom är unika:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Dropdown Menu Demo</title>
<style type="text/css">
body {margin:25px; font:12px Verdana, Arial, Helvetica}
* {padding:0; margin:0}
.dropdown {float:left; padding-right:5px}
.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover {background:url(images/header_over.gif)}
.dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
.dropdown a:hover {background:#d9e1e4; color:#000}
.dropdown .underline {border-bottom:1px solid #b9d6dc}
</style>
<script type="text/javascript" </script>

var DDSPEED = 10;
var DDTIMER = 15;

// main function to handle the mouse events //
function ddMenu(id,d){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearInterval(c.timer);
if(d == 1){
clearTimeout(h.timer);
if(c.maxh && c.maxh <= c.offsetHeight){return}
else if(!c.maxh){
c.style.display = 'block';
c.style.height = 'auto';
c.maxh = c.offsetHeight;
c.style.height = '0px';
}
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}else{
h.timer = setTimeout(function(){ddCollapse(c)},50);
}
}

// collapse the menu //
function ddCollapse(c){
c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}

// cancel the collapse if a user rolls over the dropdown //
function cancelHide(id){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearTimeout(h.timer);
clearInterval(c.timer);
if(c.offsetHeight < c.maxh){
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}
}

// incrementally expand/contract the dropdown and change the opacity //
function ddSlide(c,d){
var currh = c.offsetHeight;
var dist;
if(d == 1){
dist = (Math.round((c.maxh - currh) / DDSPEED));
}else{
dist = (Math.round(currh / DDSPEED));
}
if(dist <= 1 && d == 1){
dist = 1;
}
c.style.height = currh + (dist * d) + 'px';
c.style.opacity = currh / c.maxh;
c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
clearInterval(c.timer);
}
}
</script>
</head>
<body>

<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Dropdown One</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><a href="#" class="underline">Navigation Item 1</a></li>
<li><a href="#" class="underline">Navigation Item 2</a></li>
<li><a href="#" class="underline">Navigation Item 3</a></li>
<li><a href="#" class="underline">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</dd>
</dl>

<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">Dropdown Two</dt>
<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul>
<li><a href="#" class="underline">Navigation Item 1</a></li>
<li><a href="#" class="underline">Navigation Item 2</a></li>
<li><a href="#" class="underline">Navigation Item 3</a></li>
<li><a href="#" class="underline">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</dd>
</dl>

<dl class="dropdown">
<dt id="three-ddheader" onmouseover="ddMenu('three',1)" onmouseout="ddMenu('three',-1)">Dropdown three</dt>
<dd id="three-ddcontent" onmouseover="cancelHide('three')" onmouseout="ddMenu('three',-1)">
<ul>
<li><a href="#" class="underline">Navigation Item 1</a></li>
<li><a href="#" class="underline">Navigation Item 2</a></li>
<li><a href="#" class="underline">Navigation Item 3</a></li>
<li><a href="#" class="underline">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</dd>
</dl>

<div style="clear:both" />

</body>
</html>
```

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

## #22 — Anders Gusten, 2011-05-12T09:44Z

Tack! Jag lyckades lösa det på det sättet du sa.

> **[voigtann1 skrev:](https://www.webforum.nu/p/1534671)**
>
> Vad är problemet? Du bygger ju bara ut HTML och se till att dom är unika:
>
>
> ```
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
> <title>JavaScript Dropdown Menu Demo</title>
> <style type="text/css">
> body {margin:25px; font:12px Verdana, Arial, Helvetica}
> * {padding:0; margin:0}
> .dropdown {float:left; padding-right:5px}
> .dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
> .dropdown dt:hover {background:url(images/header_over.gif)}
> .dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
> .dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
> .dropdown li {display:inline}
> .dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
> .dropdown a:hover {background:#d9e1e4; color:#000}
> .dropdown .underline {border-bottom:1px solid #b9d6dc}
> </style>
> <script type="text/javascript" </script>
> 
> var DDSPEED = 10;
> var DDTIMER = 15;
> 
> // main function to handle the mouse events //
> function ddMenu(id,d){
> var h = document.getElementById(id + '-ddheader');
> var c = document.getElementById(id + '-ddcontent');
> clearInterval(c.timer);
> if(d == 1){
> clearTimeout(h.timer);
> if(c.maxh && c.maxh <= c.offsetHeight){return}
> else if(!c.maxh){
> c.style.display = 'block';
> c.style.height = 'auto';
> c.maxh = c.offsetHeight;
> c.style.height = '0px';
> }
> c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
> }else{
> h.timer = setTimeout(function(){ddCollapse(c)},50);
> }
> }
> 
> // collapse the menu //
> function ddCollapse(c){
> c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
> }
> 
> // cancel the collapse if a user rolls over the dropdown //
> function cancelHide(id){
> var h = document.getElementById(id + '-ddheader');
> var c = document.getElementById(id + '-ddcontent');
> clearTimeout(h.timer);
> clearInterval(c.timer);
> if(c.offsetHeight < c.maxh){
> c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
> }
> }
> 
> // incrementally expand/contract the dropdown and change the opacity //
> function ddSlide(c,d){
> var currh = c.offsetHeight;
> var dist;
> if(d == 1){
> dist = (Math.round((c.maxh - currh) / DDSPEED));
> }else{
> dist = (Math.round(currh / DDSPEED));
> }
> if(dist <= 1 && d == 1){
> dist = 1;
> }
> c.style.height = currh + (dist * d) + 'px';
> c.style.opacity = currh / c.maxh;
> c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
> if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
> clearInterval(c.timer);
> }
> }
> </script>
> </head>
> <body>
> 
> <dl class="dropdown">
> <dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Dropdown One</dt>
> <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
> <ul>
> <li><a href="#" class="underline">Navigation Item 1</a></li>
> <li><a href="#" class="underline">Navigation Item 2</a></li>
> <li><a href="#" class="underline">Navigation Item 3</a></li>
> <li><a href="#" class="underline">Navigation Item 4</a></li>
> <li><a href="#">Navigation Item 5</a></li>
> </ul>
> </dd>
> </dl>
> 
> <dl class="dropdown">
> <dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">Dropdown Two</dt>
> <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
> <ul>
> <li><a href="#" class="underline">Navigation Item 1</a></li>
> <li><a href="#" class="underline">Navigation Item 2</a></li>
> <li><a href="#" class="underline">Navigation Item 3</a></li>
> <li><a href="#" class="underline">Navigation Item 4</a></li>
> <li><a href="#">Navigation Item 5</a></li>
> </ul>
> </dd>
> </dl>
> 
> 
> <dl class="dropdown">
> <dt id="three-ddheader" onmouseover="ddMenu('three',1)" onmouseout="ddMenu('three',-1)">Dropdown three</dt>
> <dd id="three-ddcontent" onmouseover="cancelHide('three')" onmouseout="ddMenu('three',-1)">
> <ul>
> <li><a href="#" class="underline">Navigation Item 1</a></li>
> <li><a href="#" class="underline">Navigation Item 2</a></li>
> <li><a href="#" class="underline">Navigation Item 3</a></li>
> <li><a href="#" class="underline">Navigation Item 4</a></li>
> <li><a href="#">Navigation Item 5</a></li>
> </ul>
> </dd>
> </dl>
> 
> <div style="clear:both" />
> 
> 
> </body>
> </html>
> ```

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

## #23 — TobiasN, 2011-06-02T10:03Z

Utan att ha läst hela koden så skulle jag rekommendera dig att inte använda javascript för dropdown menyer. Det gynnar inte din [sökmotoroptimering](http://www.webfish.se/k/sokmotoroptimering). Gör en meny som Google förstår i stället. Använd CSS. 
Behöver du hjälp så kan du kolla in detta [wordpress plugin](http://www.webfish.se/wp/plugins/webfish-dropdown-menu).

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/186501-dropdown-meny-med-fördröjning/page2  
Föregående sida: https://www.webforum.nu/amne/javascript/186501-dropdown-meny-med-fördröjning.md
