Javascript dropdown fadende meny

[bjornawarjar]

Har problem med et javascript som lager en meny med undermenyer som fader ut og inn.

Hovedmenyen er en serie med rollovere som har en onMouseOver() som kaller på en funksjon i javascript.

Undermenyene er layere med rollovere organisert i tabeller.

 

Problemet er når man drar musa fra hovedmenyen og over til en undermeny, da denne forsvinner.

Håper noen har noe tips.

 

Koden er som følger:

 

<script type="text/javascript">

var i = 0;

 

<-- Viser undermenyen -->

function vis()

{

document.getElementById('Layer2').style.visibility="visible";

fade()

}

function fade(){

if (i< 60){

i=i+4

document.getElementById("Layer2").filters.alpha.opacity=i

t=setTimeout("fade()",2)

}

}

 

<-- skjuler undermenyen -->

function skjul()

{

if (i<=0){

document.getElementById("Layer2").style.visibility="hidden"

}

else if (Layer2.mouseOut){

fadeut();

}

else{

vis();

}

}

 

function fadeut(){

if (i<=0){

document.getElementById("Layer2").style.visibility="hidden"

}

else{

if (i> 0){

i=i-2;

document.getElementById("Layer2").filters.alpha.opacity=i;

t=setTimeout("fadeut()",2);

}

}

}

 

</script>

[LostOblivion]

Er det en container av noe slag som har en onmouseover attributt på seg, og en onmouseout på seg? Sånn jeg har gjort det hver gang jeg lager slike menyer, er at jeg nester alle containerne (være de lists eller tables) inni hverandre. Da vil nemlig ikke onmouseout bli kjørt før brukeren har gått ut av denne containeren, og siden alle undermenyer ligger i denne containeren vil ikke de skjules heller. F eks HTML:

 

(De to første er to undermenyer, men den siste har en meny under seg igjen.)

 

---HTML---
<ul id="nav">
<li>
<a href="javascript: return false;" onmouseover="toggleMenu('sub_1');">Russ</a>
<ul id="sub_1" class="submenu" onmouseout="toggleMenu('sub_1');">
<li>Rød</li>
<li>Blå</li>
<li>Grønn</li>
</ul>
</li>
<li>
<a href="javascript: return false;" onmouseover="toggleMenu('sub_2');">Universitetsgrad</a>
<ul id="sub_2" class="submenu" onmouseout="toggleMenu('sub_1');">
<li>Bachelor</li>
<li>Master</li>
<li>PhD</li>
</ul>
</li>
<li>
<a href="javascript: return false;" onmouseover="toggleMenu('sub_3');">Natur</a>
<ul id="sub_3" class="submenu" onmouseout="toggleMenu('sub_3');">
<li>
<a href="javascript: return false;" onmouseover="toggleMenu('sub_4');">Trær</a>
<ul id="sub_4" class="submenu" onmouseout="toggleMenu('sub_4');">
<li>Furu</li>
<li>Gran</li>
<li>Ask</li>
</ul>
</li>
<li>
<a href="javascript: return false;" onmouseover="toggleMenu('sub_5');">Blomster</a>
<ul id="sub_5" class="submenu" onmouseout="toggleMenu('sub_5');">
<li>Rose</li>
<li>Blåklokke</li>
<li>Lilje</li>
</ul>
</li>
<li>
<a href="javascript: return false;" onmouseover="toggleMenu('sub_6');">Insekter</a>
<ul id="sub_6" class="submenu" onmouseout="toggleMenu('sub_6');">
<li>Maur</li>
<li>Bie</li>
<li>Humle</li>
</ul>
</li>
</ul>
</li>
</ul>

---CSS---
ul.submenu {
display: none;
}

etc

---JavaScript---
function toggleMenu(id)
{
obj = document.getElementById(id);
if (obj.style.display == "none")
obj.style.display = "block";
else
obj.style.display = "none";
// dette er bare for å vise, fadingen fikser du bare inn i en noe lik funksjon
}

 

Enda bedre er om du drar på med at alle menyer resetter seg/skjules et gitt tidsintervall etter at brukeren har tatt musa ut av det objektet.

 

Men jeg tror ikke helt jeg skjønte problemet. Hvis du gir meg lenken til en side som demonstrerer?

[bjornawarjar]

Har problem med et javascript som lager en meny med undermenyer som fader ut og inn.

Hovedmenyen er en serie med rollovere som har en onMouseOver() som kaller på en funksjon i javascript.

Undermenyene er layere med rollovere organisert i tabeller.

 

Problemet er når man drar musa fra hovedmenyen og over til en undermeny, da denne forsvinner.

Håper noen har noe tips.

 

Koden er som følger:

 

<script type="text/javascript">

var i = 0;

 

<-- Viser undermenyen -->

function vis()

{

document.getElementById('Layer2').style.visibility="visible";

fade()

}

function fade(){

if (i< 60){

i=i+4

document.getElementById("Layer2").filters.alpha.opacity=i

t=setTimeout("fade()",2)

}

}

 

<-- skjuler undermenyen -->

function skjul()

{

if (i<=0){

document.getElementById("Layer2").style.visibility="hidden"

}

else if (Layer2.mouseOut){

fadeut();

}

else{

vis();

}

}

 

function fadeut(){

if (i<=0){

document.getElementById("Layer2").style.visibility="hidden"

}

else{

if (i> 0){

i=i-2;

document.getElementById("Layer2").filters.alpha.opacity=i;

t=setTimeout("fadeut()",2);

}

}

}

 

</script>

8528104[/snapback]

 

Hver meny er en div-layer som inneholder en tabell med knapper.

Jeg la ut siden på http://www.grizzlysurfer.com/menytest.htm , slik at du kan se hele koden. Jeg la ikke inn mappa med knappene der da.

[LostOblivion]

Ok, jeg kan ikke tolke JavaScript-koden som Dreamweaver har generert. Hvis du skal lage en slik meny, foreslår jeg at du bruker Dreamweaver 100 %, eller gjør alt selv. Å blande egen kode inn i det krøvelet Dreamweaver genererer er i utgangspunktet en håpløs oppgave.

 

Jeg ville heller sett på det jeg skrev i min forrige post og heller integrert fade-effekten inn i den. =)