Søg
Avatar billede hmm10 Nybegynder
15. juli 2005 - 18:13 Der er 15 kommentarer og
1 løsning

Menu: vent før del skjules iegn

Hej,

Jeg har lavet en simpel omuseover effect i en almindelig <div>, hvor der åbnes (fremkommer) en ny <div> nedenunder. Det gør jeg med:

<script>
  function ActivMenu_over(who) {
    document.getElementById('ActivMenu'+who).style.display = 'block';
  }
  function ActivMenu_out(who) {
    document.getElementById('ActivMenu'+who).style.display = 'none';
  }
</script>

<div onmouseOver="ActivMenu_over(1); return true;" onmouseOut="ActivMenu_out(1); return true;">Åben</div>

<div style="position: absolute; display: none;" id="ActivMenu1">Min menu</div>

Mit problem ligger i, at den nyåbnede <div> lukker, når jeg kører musen ud fra min første <div>, så jeg skal bruge et-eller-andet, der gør at jeg har lidt tid til at få musen hen til den nyåbnede <div> og derfra bibeholde den. (Den skal så lukke når man køre udfra den efter lidt tid.)

Kan nogen hjælpe med lidt "forstålig" kode?

Med Venlig Hilsen,
HMM10
Avatar billede nielle Nybegynder
15. juli 2005 - 19:18 #1
<script type="text/javascript">
function ActivMenu_over(who)
{
    document.getElementById('ActivMenu'+who).style.display = 'block';
}

function ActivMenu_out(who)
{
    id = "ActivMenu" + who;
    setTimeout("document.getElementById(id).style.display = 'none';", 5000);
}
</script>
Avatar billede mysli Nybegynder
15. juli 2005 - 19:28 #2
<script type="text/javascript">
var hide;

function ActivMenu_hide(who)
{
    id = "ActivMenu" + who;
    setTimeout("ActivMenu_doHide("+who+"),2000);
hide = true;
}

function ActivMenu_doHide(who){
    if (hide){
      id = "ActivMenu" + who;
      setTimeout("document.getElementById(id).style.display = 'none';", 100);
}
}

activMenu_dontHide(){
hide = false;
}

</script>

<div style="position: absolute; display: none;" onMouseover="ActivMenu_dontHide()" onMouseOut="ActivMenu_hide(1)" id="ActivMenu1">Min menu</div>

Det skulle gerne virke
Avatar billede mysli Nybegynder
15. juli 2005 - 19:29 #3
Ved nielles forslag vil den gemme menuen efter 5 sekunder - også selv om du tager musen ned over den
Avatar billede mysli Nybegynder
15. juli 2005 - 19:30 #4
Selvølgelig skal funktionen ActivMenu_over stadig være der
Avatar billede hmm10 Nybegynder
15. juli 2005 - 19:54 #5
-- Kan du så ikke være flink og vise det med det hele så?
Avatar billede nielle Nybegynder
15. juli 2005 - 20:39 #6
Hvis der er mere end en menu så dur det ikke at have en enkelt parameter - hide - til at styre det hele.
Avatar billede hmm10 Nybegynder
15. juli 2005 - 20:49 #7
Det kan der være noget om, jeg bruger den samme flere steder..
Avatar billede roenving Novice
15. juli 2005 - 22:22 #8
Hvad med at have undermenuen som en del af hoved-tingen, f.eks. vist i http://www.eksperten.dk/spm/414464 !-)
Avatar billede mysli Nybegynder
15. juli 2005 - 23:21 #9
Hvis der er mere end én menu - kan variablen oldmenu tilføjes, så funktionen ActivMenu_over først gemmer oldmenu, derefter sætter oldmenu til den menu man lige har bedt om at få vist.
Avatar billede roenving Novice
15. juli 2005 - 23:23 #10
Ja !-)
Avatar billede mysli Nybegynder
15. juli 2005 - 23:28 #11
<HTML>
<HEAD>
<script type="text/javascript">
var hide;
var oldMenu;

function ActivMenu_hide(who)
{
    id = "ActivMenu" + who;
    setTimeout("ActivMenu_doHide("+who+"),2000);
hide = true;
}

function ActivMenu_doHide(who){
    if (hide){
      id = "ActivMenu" + who;
      setTimeout("document.getElementById(id).style.display = 'none';", 100);
}
}

activMenu_dontHide(){
hide = false;
}

function ActivMenu_over(who)
{
  if (document.getElementById(oldMenu)){
    document.getElementById(oldMenu).style.display = 'none';
}

    id = 'ActivMenu'+who;
   
    document.getElementById(id).style.display = 'block';

    oldMenu = id;
}


</script>
</HEAD>
<BODY>
<div onmouseOver="ActivMenu_over(1); ActivMenu_dontHide();" onmouseOut="ActivMenu_hide(1)">Åben</div>

<div style="position: absolute; display: none;" onMouseOver="ActivMenu_dontHide()" onMouseOut="ActivMenu_hide(1)" id="ActivMenu1">Min menu</div>
</BODY>
</HTML>

Det burde virke
Avatar billede mysli Nybegynder
15. juli 2005 - 23:32 #12
SKulle lige rette nogle fejl. Det her virker hos mig.

<HTML>
<HEAD>
<script type="text/javascript">
var hide;
var oldMenu;

function ActivMenu_hide(who)
{
    var id = 'ActivMenu' + who;
    setTimeout("ActivMenu_doHide("+who+")",2000);
hide = true;
}

function ActivMenu_doHide(who){
    if (hide){
      id = "ActivMenu" + who;
      setTimeout("document.getElementById(id).style.display = 'none';", 100);
}
}

function ActivMenu_dontHide(){
hide = false;
}

function ActivMenu_over(who)
{
  if (document.getElementById(oldMenu)){
    document.getElementById(oldMenu).style.display = 'none';
}

    id = 'ActivMenu'+who;
   
    document.getElementById(id).style.display = 'block';

    oldMenu = id;
}


</script>
</HEAD>
<BODY>
<div onmouseOver="ActivMenu_over(1); ActivMenu_dontHide();"

onmouseOut="ActivMenu_hide(1)">Åben</div>


<div style="position: absolute; display: none;" onMouseOver="ActivMenu_dontHide()"

onMouseOut="ActivMenu_hide(1)" id="ActivMenu1">Min menu</div>
</BODY>
</HTML>
Avatar billede roenving Novice
16. juli 2005 - 00:20 #13
-- en bedre idé er at have selve objektet i variablen:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.menu{cursor:pointer;position:relative;}
.menu div{display:none;}
</style>
<script type="text/javascript">
var oldMenu;

function ActiveMenu(elm){
  if(oldMenu)
    oldMenu.display = 'none';
  oldMenu = elm.getElementsByTagName('DIV')[0].style;
  oldMenu.display = 'block';
}


</script>
</head>
<body>
<div class="menu" onmouseover="ActiveMenu(this);">Åben
  <div id="ActivMenu1">Min menu</div>
</div>
<div class="menu" onmouseover="ActiveMenu(this);">Åben
  <div id="ActivMenu2">Min menu</div>
</div>
<div class="menu" onmouseover="ActiveMenu(this);">Åben
  <div id="ActivMenu3">Min menu</div>
</div>
<div class="menu" onmouseover="ActiveMenu(this);">Åben
  <div id="ActivMenu4">Min menu</div>
</div>
<div class="menu" onmouseover="ActiveMenu(this);">Åben
  <div id="ActivMenu5>Min menu</div>
</div>
</body>
</html>
Avatar billede hmm10 Nybegynder
16. juli 2005 - 11:43 #14
mysli: Den vriker :) smid et svar..
Avatar billede mysli Nybegynder
16. juli 2005 - 12:25 #15
Hvis du så skal lave et dropdown der hopper ned fra en menu må du arbejde lidt med offset og sådan.

Et svar:)
Avatar billede hmm10 Nybegynder
16. juli 2005 - 18:34 #16
Tja, det kunne man jo gøre, men nu var den kun til en simpel menu rundt omkring på min side :)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 15:10 WINDOWS KOMPABILITET Af snestrup2000 i Windows
22/0720:19 DVB T2 tuner med optagefunktion Af ErikHg i Andet hardware
20/0716:00 Fildeling mellem 2 windows 11 systemer Af knudg i Windows
20/0714:16 Smartwatch med faldalarm og sos Af hkv i Fitness & Smartwatches
20/0711:23 System til bordreservation Af Strawberry i PHP
White papers
Flere white papers »