---
title: "Dropdownruta"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/159685-dropdownruta/page2"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Asa"
published: "2007-04-26T21:06:19.000Z"
updated: "2007-05-04T11:05:57.000Z"
replies: 28
views: 1153
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/html-css/159685-dropdownruta"
---

# Dropdownruta

_Sida 2 av 2._

## #21 — Asa, 2007-04-27T15:45Z

Det blir bra så :)

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

## #22 — tanten, 2007-04-27T17:05Z

Ok. Ändrade så att hoverfunktionen bara finns inne i ett td nu i stället för att försöka få en annan att öppna sig så nu validerar den också...
Syns i de gamla länkarna...   :)

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

## #23 — Asa, 2007-05-03T19:34Z

En fråga till, denna menyn?
<https://www.gruvsjo.se/meny/meny.asp>

Kan man få så att den öppna huvudmenyn stängs då man klickar på en annan huvudmeny?

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

## #24 — headbug, 2007-05-03T22:05Z

> **Asa skrev:**
>
> En fråga till, denna menyn?
> <https://www.gruvsjo.se/meny/meny.asp>
> 
> Kan man få så att den öppna huvudmenyn stängs då man klickar på en annan huvudmeny?

Ja det går med lite pill, jag har en animerad variant som du kan titta på på <https://www.egenart.org/test/nr1/>

Ska se om jag lyckas modifiera din meny.js så att den gör det... återkommer :)

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

## #25 — headbug, 2007-05-03T22:17Z

> **headbug skrev:**
>
> Ja det går med lite pill, jag har en animerad variant som du kan titta på på <https://www.egenart.org/test/nr1/>
> 
> Ska se om jag lyckas modifiera din meny.js så att den gör det... återkommer :)

Det var inte så lätt som jag hoppades, ditt JS använder events och eventhandles på det klickade elementet så en modifiering rakt av är inte aktuell, kolla in det jag har länkat till och om du inte vill ha animeringen så kan man sätta en timer till 0 tror jag :)

/HB

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

## #26 — Asa, 2007-05-03T22:20Z

Kikar på den me animeringen och den såg ju tuff ut. Blir nog den jag använder. Om ingen annan kan få till menyn.

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

## #27 — headbug, 2007-05-03T22:28Z

> **Asa skrev:**
>
> Kikar på den me animeringen och den såg ju tuff ut. Blir nog den jag använder. Om ingen annan kan få till menyn.

Ok, säg till om du vill att jag skickar dig filerna, om du inte laddar ner dom själv från sidan!

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

## #28 — Asa, 2007-05-03T22:31Z

Jag sparar ner filerna tror jag men maila dem till <Asa@gruvsjo.se> för säkerhets skull.

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

## #29 — bossse, 2007-05-04T11:05Z

Här en liknande meny som Headbug!
Modifierad från dropdownmenyn på min sida som kan ses [HÄR](http://norrtalje.web.surftown.se) 
Bara att ta bort lu1 t.o.m. lu5 om man ej vill ha färgade undermenyer.

\<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"\>
\<html\>
\<head\>
\<style type=text/css\>
html, body {background-color:green}
dl, dt, dd, ul, li {margin:0;padding:0;list-style-type:none;z-index:200}
dt {height:22px;font-size:12pt;border:1px solid black;}
li {position:relative; height:22px;font-size:12pt;border:1px solid black;}
\#menu {position:absolute;top:50px;left:20px; width:178px;border:1px solid;background-color:green;}
\#menu dt {cursor:pointer;font-weight:bold;color:blue;}
\#menu li a, #menu dt a {height:20px;border:none;font-weight:normal;text-decoration:none;display:block;color:red}
\#menu li a:hover, #menu dt a:hover {text-decoration:none}
\#lu1 {position:relative; left:50px;width:125px;background-color:#FFCC00;}
\#lu2 {position:relative; left:50px;width:125px;background-color:#FF9999;}
\#lu3 {position:relative; left:50px;width:125px;background-color:#CCCCCC;}
\#lu4 {position:relative; left:50px;width:125px;background-color:#CCCC00;}
\#lu5 {position:relative; left:50px;width:125px;background-color:#CCCCFF;}
\</style\>
\<script type="text/javascript"\>
window.onload=show;
function show(id) 	{
var d = document.getElementById(id);
	for (var i = 1; i\<=15; i++) 	
{if (document.getElementById('smenu'+i)) 
{document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
\</script\>
\</head\>
\<body\>
\<dl id="menu"\>
\<dt onclick="javascript:show('smenu1');"\>Meny 1\</dt\>
	\<dd id="smenu1"\>\<ul id="lu1"\>
		\<li\>\<a href=http://www.google.se/\>1.1\</a\>\</li\>
		\<li\>\<a href=http://www.yahoo.com\>1.2\</a\>\</li\>
		\<li\>\<a href=http://www.telia.se\>1.3\</a\>\</li\>
		\<li\>\<a href=http://www.aftonbladet.se\>1.4\</a\>\</li\>
		\<li\>\<a href=http://www.svt.se\>1.5\</a\>\</li\>
	\</ul\>\</dd\>
\<dt onclick="javascript:show('smenu2');"\>Meny 2\</dt\>
	\<dd id="smenu2"\>\<ul id="lu2"\>
		\<li\>\<a href=http://www.sida2.1.htm\>2.1\</a\>\</li\>
		\<li\>\<a href=http://www.sida2.2.htm\>2.2\</a\>\</li\>
		\<li\>\<a href=http://www.sida2.3.htm\>2.3\</a\>\</li\>
		\<li\>\<a href=http://nebk.sida2.4.htm\>2.4\</a\>\</li\>
\</ul\>\</dd\>	
\<dt onclick="javascript:show('smenu3');"\>Meny 3\</dt\>
	\<dd id="smenu3"\>\<ul id=lu3\>
		\<li\>\<a href=http://www.google.se\>3.1\</a\>\</li\>
		\<li\>\<a href=http://www.telia.com\>3.2\</a\>\</li\>
		\<li\>\<a href=http://www.yahoo.se\>3.3\</a\>\</li\>
\</ul\>\</dd\>
\<dt onclick="javascript:show('smenu4');"\>Meny 4\</dt\>
	\<dd id="smenu4"\>\<ul id=lu4\>
		\<li\>\<a href=http://www.sida41.htm\>4.1\</a\>\</li\>
		\<li\>\<a href=http://www.sida42.htm\>4.2\</a\>\</li\>
		\<li\>\<a href=http://www.sida43.htm\>4.3\</a\>\</li\>
		\<li\>\<a href=http://www.sida44.htm\>4.4\</a\>\</li\>
		\<li\>\<a href=http://www.sida45.htm\>4.5\</a\>\</li\>
\</ul\>\</dd\>
\<dt onclick="javascript:show('smenu5');"\>Meny 5\</dt\>
	\<dd id="smenu5"\>\<ul id=lu5\>
		\<li\>\<a href=http://www.sida51.htm\>5.1\</a\>\</li\>
		\<li\>\<a href=http://www.sida52.htm\>5.2\</a\>\</li\>
		\<li\>\<a href=http://www.sida53.htm\>5.3\</a\>\</li\>
\</ul\>
\</dd\>
\</body\>
\</html\>

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/159685-dropdownruta/page2  
Föregående sida: https://www.webforum.nu/amne/html-css/159685-dropdownruta.md
