---
title: "<div> -meny"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/121217-div-meny"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "hannahb"
published: "2005-01-24T10:16:48.000Z"
updated: "2005-02-03T14:01:05.000Z"
replies: 16
views: 678
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/121217-div-meny"
---

# <div> -meny

## #1 — hannahb, 2005-01-24T10:16Z

Hej! 

Jag har gjort en meny med hjälp av lager så här; 

function fnHide(pId,cId){ 
document.getElementById(cId).style.position='absolute'; 
document.getElementById(cId).style.visibility='hidden'; 
} 
\<div id="MaterialMain" onmouseover="fnShow('MaterialMain','MaterialDetails')" style="cursor:pointer" onmouseout="fnHide('MaterialMain','MaterialDetails')"\>\<a class="ab" href="demo.php?p_id=10"\>Material\</a\>\<br/\> 
\<div id="MaterialDetails" onmouseover="fnShow('MaterialMain','MaterialDetails')" style="visibility:hidden; position:absolute"\> 
&nbsp;\<a class="aa" href="demo.php?p_id=11"\>material\</a\>\<br/\> 
&nbsp;\<a class="aa" href="demo.php?p_id=12"\>annat material\</a\>\<br/\> 
\</div\> 
\</div\> 

Den fungerar bra i IE men i Firefox försvinner undermenyerna när man ska föra muspekaren över dem. Någon som vet varför? 
Jag har provat lägga en setTimeout och då ligger undermenyerna kvar, men då försvinner de inte heller när man för muspekaren utanför, utan de ligger kvar hela tiden. 

MVH 
/Hannah

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

## #2 — Palle, 2005-01-24T10:29Z

Flyttad från HTML, XHTML & CSS.

mvh Palle
Moderator webForum

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

## #3 — hannahb, 2005-01-28T09:39Z

&lt;div&gt; -meny

Hej!

Är det någon som har något tips om hur man får detta att fungera i FF? 
Som det är nu försvinner "unermenyn" när man för ner muspekaren över den.
Det fungerar bra i IE.

\<div id="OrgMain" onmouseover="fnShow('OrgMain','OrgDetails')" style="cursor:pointer" onmouseout="fnHide('OrgMain','OrgDetails')"\>

\<a class="ab" href="demo.php?p_id=2"\>HUVUDMENY\</a\>
\<br/\>

\<div id="OrgDetails" onmouseover="fnShow('OrgMain','OrgDetails')"  style="visibility:hidden; position:absolute"\> 
&nbsp;\<a class="aa" href="demo.php?p_id=3"\>UNDERMENY\</a\>\<br/\>
\</div\>

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

## #4 — nitro2k01, 2005-01-28T10:13Z

Då måste jag se funktionerna fnShow och fnHide.
Ett bra första steg är att leta efter document.all\[någonting\] och byta ut mot document.getElementById(någonting), där den gamla alltså har hak-parenteser \[\] och den nya har böjda parenteser (), som måste bytas ut.

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

## #5 — hannahb, 2005-01-28T10:29Z

OK, så här ser funktionerna ut...har bara kopat och använt samma jämt och det fungerar bra i IE.

\<script language="JavaScript" type="text/javascript"\>
function fnShow(pId,cId){
	document.getElementById(cId).style.position='relative';
	document.getElementById(cId).style.visibility='visible';
	if(pId == OrgMain){
		MaterialMain.style.visibility='hidden';
	}
	}
function fnHide(pId,cId){
	document.getElementById(cId).style.position='absolute';
	document.getElementById(cId).style.visibility='hidden';
	}

 \</script\>

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

## #6 — nitro2k01, 2005-01-28T11:06Z

Jag får för mig att det saknas lite kod. Följer det med någon .js-fil?

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

## #7 — hannahb, 2005-01-28T11:43Z

Nej, det är bara det.
Det fungerar som sagt i IE, vad är det du tycker saknas?

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

## #8 — Jojoxx, 2005-01-28T15:49Z

Tråden sammanslagen med orginal-tråden. Försök att fortsätta diskussionen i tråden som redan är startad.

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

## #9 — nitro2k01, 2005-01-29T12:47Z

Det jag tycker saknas är deklarationer av OrgMain och MaterialMain. Vad är dessa för något? Javascript-variabler? Ett id för en div?

Pröva detta: byt OrgMain mot "OrgMain" och MaterialMain mot document.getElementById("MaterialMain") och se om det funkar. Om det inte funkar pröva eventuellt att ändra OrgMain till document.getElementById("OrgMain") och se vad som händer. 

Kolla gärna också mozilla's felkonsol, skriv javascript: i adressraden, och se vad som står där.

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

## #10 — hannahb, 2005-01-31T06:31Z

OrgMain och MaterialMain är id på lagren.

OK, här är hela koden så som den ser ut nu, den fungerar bra i IE men ej i FF:

\<kod\>

\<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"\>
\<html\>
\<head\>
\<title\>menu\</title\>
\<link rel="stylesheet" type="text/css" href="ie.css"\>
\<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"\>
\<script language="JavaScript" type="text/javascript"\>
function fnShow(pId,cId){
	document.getElementById(cId).style.position='relative';
	document.getElementById(cId).style.visibility='visible';
	if(pId == OrgMain){
		MaterialMain.style.visibility='hidden';
	}
	}
function fnHide(pId,cId){
	document.getElementById(cId).style.position='absolute';
	document.getElementById(cId).style.visibility='hidden';
	}

 \</script\> 
\</head\>

\<body\>
\<div id="menu"\>

  \<div id="StartMain" style="cursor:pointer"\>\<a class="ab" href="demo.php?p_id=1"\>Startsida\</a\>\<br/\>
  \</div\>
                                                                                          
                                                                                  
  \<div id="OrgMain" onmouseover="fnShow('OrgMain','OrgDetails')" style="cursor:pointer" onmouseout="fnHide('OrgMain','OrgDetails')"\>\<a class="ab" href="demo.php?p_id=2"\>HUVUDMENY1\</a\>\<br/\>
              \<div id="OrgDetails" onmouseover="fnShow('OrgMain','OrgDetails')"  style="visibility:hidden; position:absolute"\> 
                &nbsp;\<a class="aa" href="demo.php?p_id=3"\>UNDERMENY11\</a\>\<br/\>
                &nbsp;\<a class="aa" href="demo.php?p_id=4"\>UNDERMENY12\</a\>\<br/\>             
              \</div\>
            \</div\>
	
  \<div id="MaterialMain" onmouseover="fnShow('MaterialMain','MaterialDetails')" style="cursor:pointer" onmouseout="fnHide('MaterialMain','MaterialDetails')"\>\<a class="ab" href="demo.php?p_id=10"\>HUVUDMENY2\</a\>\<br/\>
    \<div id="MaterialDetails" onmouseover="fnShow('MaterialMain','MaterialDetails')" style="visibility:hidden; position:absolute"\> 
      &nbsp;\<a class="aa" href="demo.php?p_id=11"\>UNDERMENY21\</a\>\<br/\>
      &nbsp;\<a class="aa" href="demo.php?p_id=12"\>UNDERMENY22\</a\>\<br/\>     
    \</div\>
  \</div\>
\</div\>
\</body\>
\</html\>

\</kod\>

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

## #11 — hannahb, 2005-02-03T09:02Z

Tips på meny?

Hej!

Är det någon som har något tips på hur man gör en meny, med undermenyer som ploppar fram när man för muspekaren över ett huvudmenyalternaiv?
Jag har testat att göra en med \<div\>:ar som är det jag helst vill använda, men jag får det inte att fungera i alla webbläsare. Det måste fungera i IE och Firefox, helst också Netscape och Opera.

Tacksam för tips!

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

## #12 — nitro2k01, 2005-02-03T09:09Z

Om du vill ha ett färdigt skrip, fråga [Google](http://www.google.se/search?num=20&hl=sv&q=dhtml+menu&btnG=S%C3%B6k&meta=).
Om du visar den kod du anvönder nu så kan jag kolla vad du gör för fel.

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

## #13 — hannahb, 2005-02-03T09:23Z

Hej!

Tack det var snällt, men du har nog redan försökt hjälpa mig, kolla inlägget \<div\>-meny längre ner.
Jag förstår inte vad som är fel, men det har väl nåt att göra med att IE och FF inte hanterar lager lika kanske...

Försöker söka på google, men jag hittar inte så mycket som jag förstår något av  :)

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

## #14 — nitro2k01, 2005-02-03T09:45Z

Det är fortfarande inte perfekt, men nu funkar det någorlunda i Mozilla, Opera och Explorer.

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>menu</title>
<link rel="stylesheet" type="text/css" href="ie.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
function fnShow(pId,cId){
	document.getElementById(cId).style.position='relative';
	document.getElementById(cId).style.visibility='visible';
	// Nästa sats är kommenterad med /* och */ eftersom den är
	// onödig och skapar problem i Mozilla/Firefox
	/*if(pId == "OrgMain"){
		document.getElementById("MaterialDetails").style.visibility='hidden';
	}*/
}
function fnHide(pId,cId){
	document.getElementById(cId).style.position='absolute';
	document.getElementById(cId).style.visibility='hidden';
}

</script>
</head>

<body>
<div id="menu">

<div id="StartMain" style="cursor:pointer"><a class="ab" href="demo.php?p_id=1">Startsida</a><br/>
</div>

<div id="OrgMain" onmouseover="fnShow('OrgMain','OrgDetails')" style="cursor:pointer" onmouseout="fnHide('OrgMain','OrgDetails')"><a class="ab" href="demo.php?p_id=2">HUVUDMENY1</a><br/>
<div id="OrgDetails" onmouseover="fnShow('OrgMain','OrgDetails')" style="visibility:hidden; position:absolute">
 * <a class="aa" href="demo.php?p_id=3">UNDERMENY11</a><br/>
 * <a class="aa" href="demo.php?p_id=4">UNDERMENY12</a><br/>
</div>
</div>

<div id="MaterialMain" onmouseover="fnShow('MaterialMain','MaterialDetails')" style="cursor:pointer" onmouseout="fnHide('MaterialMain','MaterialDetails')"><a class="ab" href="demo.php?p_id=10">HUVUDMENY2</a><br/>
<div id="MaterialDetails" onmouseover="fnShow('MaterialMain','MaterialDetails')" style="visibility:hidden; position:absolute">
 * <a class="aa" href="demo.php?p_id=11">UNDERMENY21</a><br/>
 * <a class="aa" href="demo.php?p_id=12">UNDERMENY22</a><br/>
</div>
</div>
</div>
</body>
</html>
```

 /redigerat

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

## #15 — hannahb, 2005-02-03T12:16Z

Hej!

Tack för hjälpen, den fungerar bra i de webläsarna nu!
Men den fungerar inte i Firefox för mig...?
Jag har stött på fler än du som sagt att den fungerar bra när de kollar den i Firefox, men den fungerar inte för mig iallafall...

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

## #16 — Jojoxx, 2005-02-03T13:53Z

De båda trådarna sammanslagna.

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

## #17 — kaxigt, 2005-02-03T14:01Z

kolla [här](http://css.maxdesign.com.au/listamatic/browser-support.htm)
så kan du se vilka av  [dessa](http://css.maxdesign.com.au/listamatic/) som har stöd fullt ut ;)

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

---

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