Avatar billede tryout Nybegynder
07. januar 2004 - 17:47 Der er 20 kommentarer og
1 løsning

dropdown menu

jeg vil gerne lave en dropdown menu til min side. Jeg er kommet lidt igang, men er så gået i stå med følgende problemer.
(indtil videre holder jeg mig ME)

KODE:
<script language=javascript>
function Show(){
document.all["test"].style.visibility = "visible";
}
function Hide() {
    document.all["test"].style.visibility = "hidden";
}

</script>
...
<td onMouseover="java script:Show()"> Menu </td>

...
<div id="test" class="hidden">
<table>
<tr>
<td class="dropMenu">
<a href="http://www.google.com" onMouseout="java script:Hide()"> google</a>
</td>
</tr>
</table>
</div>
...
KODE SLUT:

Problemer:
- hvordan får jeg placeret drop-down menuen i forhold til den oprindelige menu?

- hvordan fjerner jeg drop-down menuen igen, hvis brugeren nu blot kører musen over den oprindelig menu og videre til noget andet. Jeg har forsøgt med onMouseout="java script:Hide()", men så kan man ikke kommer over på drop-down menuen uden den lukker :)
Avatar billede sbm Nybegynder
07. januar 2004 - 18:23 #1
Du kan placere din DIV tags hårdt:

#test    { position:absolute; left:110px; top:5px; }
#test2    { position:absolute; left:610px; top:5px; }
Avatar billede sbm Nybegynder
07. januar 2004 - 18:26 #2
M.h.t. spørgsmål 2, skal du måske overveje at lave din onMouseout på din layer istedet for menuknappen...?
Avatar billede sbm Nybegynder
07. januar 2004 - 18:27 #3
<div id="test" class="hidden" onMouseout="java script:Hide()">
Avatar billede tryout Nybegynder
07. januar 2004 - 18:33 #4
opstår der ikke et problem med placeringen hvis vinduets størrelse ændres når man anvender absolute?
Avatar billede sbm Nybegynder
07. januar 2004 - 18:36 #5
Det kommer an på dit design. Hvis du ligesom her på eksperten har noget i midten der viser indholdet, så giver det problemer. Hvis din indhold er klistret helt ud til venstre i vinduet, kan du uden problemer lægge en menu i venstre hjørne.
Avatar billede tryout Nybegynder
07. januar 2004 - 18:37 #6
Jeg har en tabel i midten, lidt ligesom eksperten :(
Avatar billede sbm Nybegynder
07. januar 2004 - 18:43 #7
Du har også mulighed for at prøve relativ positionering, men det har jeg ikke leget med, og kan ikke give dig gode råd til....
Avatar billede skovenborg Nybegynder
07. januar 2004 - 23:29 #8
læg lige mærke til at absolute betyder ikke absolut i forhold til siden, men i forhold til det element det er indeni. relative er i forhold til hvor den er lige nu.

Desuden skal du ikke skrive java script: i events - det tolkes automatisk til javascript. Så du skal istedet skrive:
onmouseover="Show();" osv.
Avatar billede roenving Novice
08. januar 2004 - 02:18 #9
>>skovenborg

position:absolute er i forhold til nærmest omkransende element, som er positioneret !-)

Prøv:

<body align="center" width="100%">
<table width="100%"><tr><td align="center">
<div style="position:relative;top:100px;width:200px;height:400px;background:red;">
<div style="position:absolute;width:20px;top:-50px;left:-15px;background:blue;">
Til venstre
</div>
</div>
</td></tr></table></body>
Avatar billede tryout Nybegynder
08. januar 2004 - 12:48 #10
Men findes der ikke en metoder hvormed med kan gemme dropdown menuen, f.eks. efter musen har været væk i x antal sekunder, eller når musen kører over på et andet element?
Avatar billede roenving Novice
08. januar 2004 - 17:47 #11
<td onMouseover="Show()" onMouseout="setTimeout('Hide()',500);"> Menu </td>

-- bemærk, at jeg har fjernet den ugyldige script-kode :javascript !-)

-- og så angives tiden i millisekunder, så 500 er et ½ sekund !o]
Avatar billede tryout Nybegynder
17. januar 2004 - 13:15 #12
Den er næsten ved at være der nu, sidste lille problem er nu drop-menuen ikke skal forsvinde hvis man kører musen over på den.
Avatar billede skovenborg Nybegynder
17. januar 2004 - 13:21 #13
roenving >> Nåja, glemte lige den detalje ;-)
Avatar billede tryout Nybegynder
18. januar 2004 - 15:29 #14
Men hvordan gør man?
Avatar billede skovenborg Nybegynder
18. januar 2004 - 15:59 #15
kunne du vise den kode du har indtil videre?
Avatar billede tryout Nybegynder
18. januar 2004 - 16:08 #16
Det er måske lidt svært at overskue. Jeg kan får det til at virke nogenlunde, hvis jeg får drop-menuen til at ligge lidt inde i den originale menu. Dermed kommer jeg uden om problemet med at drop-menuen forsvinder, men det er ikke helt optimalt.

kode:

<script language=javascript>

function Show(){
document.all["test"].style.visibility = "visible";

}

function Hide() {
    document.all["test"].style.visibility = "hidden";

}
</script>
<table>
<tr>
<td>
<a href="www.html.dk"onMouseover="java script:Show()" onMouseout="Hide();"> UDEN TIMEOUT</a>
<div id="test" class="hidden">
<table>
<tr>
<td class="dropMenu">
<a href="http://www.google.com" onMouseover="Show()" onMouseout="Hide();">drop Menu</a>
</tr>
</table>
</td>
</div>
<a href="www.html.dk" onMouseover="Show()" onMouseout="setTimeout('Hide()',2000);"> Vis MENU</a>
</td>
</tr>
</table
Avatar billede skovenborg Nybegynder
18. januar 2004 - 16:24 #17
nu ved jeg ikke hvad du præcis mener med optimalt, men prøv det her:

<html>
<head>
<script language=javascript>
var timer;
function Show(){
        if (document.all) document.all["test"].style.visibility = "visible";
        else document.getElementById("test").style.visibility = "visible";

}

function Hide() {
        if (document.all) document.all["test"].style.visibility = "hidden";
        else document.getElementById("test").style.visibility = "hidden";

}
</script>
</head>
<body>

<table>
<tr>
<td>
<a href="www.html.dk" onMouseover="Show()" onMouseout="timer = window.setTimeout('Hide()',2000);"> Vis MENU</a>
<div id="test" class="hidden" style="visibility:hidden;border:1px solid #000" onmouseover="Show();" onmouseout="Hide();">
<table>
<tr>
<td class="dropMenu">
<a href="http://www.google.com" onMouseover="Show();window.clearTimeout(timer);" onMouseout="Hide();">drop Menu</a>
</tr>
</table>
</td>
</div>

</td>
</tr>
</table>
</body>
</html>

Ellers må du uddybe problemmet nærmere ;-)
Avatar billede skovenborg Nybegynder
14. februar 2004 - 16:36 #18
er det ikke begyndt at blive lukketid?!?
Avatar billede tryout Nybegynder
16. februar 2004 - 15:17 #19
undskyld, har haft travlt med studie på det sidste, så jeg har ikke haft tid til at kigge på det. I skal jo have nogle points, hvordan gør vi det nemmest?
Avatar billede skovenborg Nybegynder
16. februar 2004 - 16:29 #20
helt i orden - bare bed om af vi skal svare så kan du uddele point.

Her er et - så venter du bare på nogle af de andre svarer, så du kan acceptere dem efter behov ;-)
Avatar billede tryout Nybegynder
17. februar 2004 - 22:15 #21
ved ikke om det er helt fair, men nu får du points skovenborg
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester