Avatar billede kla Nybegynder
10. november 2002 - 09:59 Der er 3 kommentarer og
1 løsning

Egen menu funktionalitet

Jeg har været med at lege med at lave min egen menuFunktion men det driller mig lidt !!! Her først lidt kode !

##################################
<html>
<head>
<title>Menu</title>
<script>

function makeMenuItems(niveau)
{
  var returnStr = '';
 
  if (niveau == 0)
  {
    returnStr += '<table onMouseOver="showMenu(1);" onMouseOut="showMenu(0);"><tr><td>TopPunkt1</td></tr></table>';
 
  }
 
  if (niveau == 1)
  {
 
    returnStr += '<table onMouseOver="showMenu(1);" onMouseOut="showMenu(0);">';
    returnStr += '<tr><td>TopPunkt1</td></tr>';
    returnStr += '<tr><td>MenuPunkt1</td></tr>';
    returnStr += '<tr><td>MenuPunkt2</td></tr>';
    returnStr += '<tr><td>MenuPunkt3</td></tr>';
    returnStr += '</table></div>';
 
 
  }

  return returnStr;
 
}

function showMenu(num)
{
 
  var str = '';
 
  str += '<table id="outerTable" border="1"><tr><td>';

  str += makeMenuItems(num);
  str += '</table></td></tr>';
   
  document.all.menuID1.innerHTML = str;

}

function init()
{
  showMenu(0);

}

</script>
</head>
<body onload="init();">

<div id="menuID1">

</div>
<script>
 
</script>
</body>
</html>
#####################################
Jeg får fint min menu frem men min omMouseOut bliver aldrig aktiveret hvordan kan det være ???
Avatar billede Slettet bruger
10. november 2002 - 12:06 #1
Prøv med onMouseEnter og onMouseLeave. Det virker (måske) i IE5.5+.

Ellers opstår fejlen, fordi table-koden sådan set bare er en beholder for tr-elemterne, der igen bare er beholdere for td-elementerne. Det er jo kun td'erne, der fysisk ses på skærmen, og det er formentlig også kun dem, der vil reagere på musens bevægelser.
Du kan lege lidt med et sætte timeout på fx et halvt sekund ved onMouseOut på en td, der bliver clearet, hvis man bevæger musen ind over en anden td. Hvis timeout'en når at udløbe, så skal menuen skjules!
Avatar billede kla Nybegynder
10. november 2002 - 17:42 #2
Det der med timeren hvordan kunne det se ud i lidt kode ?
Avatar billede Slettet bruger
10. november 2002 - 20:46 #3
<html>
<head>
<title>Menu</title>
<script>
var to;

function makeMenuItems(niveau)
{
  var returnStr = '';
 
  if (niveau == 0)
  {
    returnStr += '<table cellspacing="0"><tr><td onMouseOver="showMenu(1);" onMouseOut="setTO();">TopPunkt1</td></tr></table>';
 
  }
 
  if (niveau == 1)
  {
 
    returnStr += '<table cellspacing="0">';
    returnStr += '<tr><td onMouseOver="showMenu(1);" onMouseOut="setTO();">TopPunkt1</td></tr>';
    returnStr += '<tr><td onMouseOver="showMenu(1);" onMouseOut="setTO();">MenuPunkt1</td></tr>';
    returnStr += '<tr><td onMouseOver="showMenu(1);" onMouseOut="setTO();">MenuPunkt2</td></tr>';
    returnStr += '<tr><td onMouseOver="showMenu(1);" onMouseOut="setTO();">MenuPunkt3</td></tr>';
    returnStr += '</table></div>';
 
 
  }

  return returnStr;
 
}

nr = 1;


function showMenu(num)
{
  clearTimeout(to);

  if (num == nr)
    return;
 
  var str = '';
 
  str += '<table id="outerTable" border="1"><tr><td>';

  str += makeMenuItems(num);
  str += '</table></td></tr>';
   
  document.all.menuID1.innerHTML = str;

  nr = num;

}

function setTO() {
  to = setTimeout("showMenu(0);", 200);
}

function init()
{
  showMenu(0);

}

</script>
</head>
<body onload="init();">

<div id="menuID1">

</div>
<script>
 
</script>
</body>
</html>

Læg mærke til, at tabellen SKAL have cellspacing sat til nul. Ellers vil musen kunne føres ind i et "tomrum" mellem to td'er, og timout'en vil derfor ikke blive clearet!
Avatar billede kla Nybegynder
13. december 2002 - 18:14 #4
Så kom jeg endelig tilbage til min lille menu, og misanden om det ikke virker... takker for hjælpen ;-)
/kla@
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