<div> -meny

16 svar · 650 visningar · startad av hannahb 24 jan. 2005

hannahbMedlem sedan jan. 200523 inlägg

24 jan. 2005 10:16#1

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">
<a class="aa" href="demo.php?p_id=11">material</a><br/>
<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

PalleMedlem sedan apr. 20003 174 inlägg

24 jan. 2005 10:29#2

Flyttad från HTML, XHTML & CSS.

mvh Palle
Moderator webForum

hannahbMedlem sedan jan. 200523 inlägg

28 jan. 2005 09:39#3

<div> -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.

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

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

nitro2k01Medlem sedan aug. 20039 342 inlägg

28 jan. 2005 10:13#4

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.

hannahbMedlem sedan jan. 200523 inlägg

28 jan. 2005 10:29#5

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

</script>

nitro2k01Medlem sedan aug. 20039 342 inlägg

28 jan. 2005 11:06#6

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

hannahbMedlem sedan jan. 200523 inlägg

28 jan. 2005 11:43#7

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

JojoxxMedlem sedan juni 20004 308 inlägg

28 jan. 2005 15:49#8

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

nitro2k01Medlem sedan aug. 20039 342 inlägg

29 jan. 2005 12:47#9

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.

hannahbMedlem sedan jan. 200523 inlägg

31 jan. 2005 06:31#10

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>

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

</kod>

hannahbMedlem sedan jan. 200523 inlägg

3 feb. 2005 09:02#11

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!

nitro2k01Medlem sedan aug. 20039 342 inlägg

3 feb. 2005 09:09#12

Om du vill ha ett färdigt skrip, fråga Google.
Om du visar den kod du anvönder nu så kan jag kolla vad du gör för fel.

hannahbMedlem sedan jan. 200523 inlägg

3 feb. 2005 09:23#13

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 :)

nitro2k01Medlem sedan aug. 20039 342 inlägg

3 feb. 2005 09:45#14

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

hannahbMedlem sedan jan. 200523 inlägg

3 feb. 2005 12:16#15

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

JojoxxMedlem sedan juni 20004 308 inlägg

3 feb. 2005 13:53#16

De båda trådarna sammanslagna.

kaxigtMedlem sedan okt. 2004636 inlägg

3 feb. 2005 14:01#17

kolla här
så kan du se vilka av dessa som har stöd fullt ut ;)