Delphi-PRAXiS - [HTML/CSS] Div verschwindet wieder...

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)

- Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)

- - [HTML/CSS] Div verschwindet wieder... (https://www.delphipraxis.net/40131-%5Bhtml-css%5D-div-verschwindet-wieder.html)

[HTML/CSS] Div verschwindet wieder...

Salut!
Bin grad dabei mir ein billig DropDownMenu zu basteln mit <div>'s die ich dann im onMouseOver Event ein und ausblenden lasse, soweit so gut, anzeigen lassen klappt wunderbar, auch nen TimeOut hab ich schon geproggt, allerdings wennsch jetzt ein div mit nem Link fülle und dann mit dem Mauszeiger innerhalb des div's auf den Link drüberfahre verschwindet das div wieder komplett :( an dem TimeOut kanns nicht liegen, dass habe ich schon getestet, hier einfach mal der Code:

Code:

			<html>

 <head>

  <title></title>

  <style type="text/css">

   body {

     font-family: verdana;

     font-size: 10px;

   }

   table {

     font-size: 12px;

   }

   .menu {

     position: absolute;

     border: 1px solid #0083D7;

     background: #FFFFFF;

     color: #000000;

     padding: 5px;

     padding-left: 20px;

     z-index: 1;

     visibility: hidden;

     width: 150px;

     display: block;

     margin-top: 1px;

   }

   .menuheader {

     display: block;

     background: #0083D7;

     padding: 2px;

     color: #FFFFFF;

     font-weight: bold;

   }

   td {

     vertical-align: top;

   }

  </style>

  <script language="javascript">

    var menuCount = 2;

    showMenu = function(target) {

      var item = document.getElementById(target);

      item.style.visibility = 'visible';

    }

    hideMenu = function(target) {

      var item = document.getElementById(target);

      item.style.visibility = 'hidden';

    }

    closeAllMenus = function() {

      for(i=0;i<menuCount;i++) {

        hideMenu('m' + i);

      }

    }

  </script>

 </head>

 <body>

  <table border="0">

   <tr>

    <td>

     <span class="menuHeader" onMouseOver="closeAllMenus(); showMenu('m0')">+ Menu 1</span>

      <div class="menu" id="m0" onMouseOver="" onMouseOut="hideMenu('m0')">

       [url="asd.htm"]Hier der Link[/url]

       Blablubb

       Blablubb II

       Blablubb III

      </div>

    </td>

    <td>

     <span class="menuHeader" onMouseOver="closeAllMenus(); showMenu('m1')">+ Menu 2</span>

     <div class="menu" id="m1" onMouseOut="hideMenu('m1');">

      Blabla

      Bla Sohn des Blabla

     </div>

    </td>

   </tr>

  </table>

 </body>

</html>

Ich habe mir mal erlaubt die TimeOut Fkt herauszunehmen um ein bissl Platz zu sparen :stupid:
Hoffe ihr könnt mir auf die Sprünge helfen, oder zumindest eine Codeoptimierung zeigen oder andere Bugs finden.

mfg phlux :hi:

Re: [HTML/CSS] Div verschwindet wieder...

Hallo phlux :hi:

Ich sehe als einzige Möglichkeit, dein Menü zum FUnktinieren zu bringen, dass du für jeden Link (da liegt das Problem ja) ein extra DIV-Element verwendest und in dessen OnClick-Events über JavaScript eine neue Seite aufrufst. Wenn man nämlich über einen Link fährt, versteht der Browser das als wäre der User aus dem DIV-Element hinausgefahren und deswegen verschwindet dieses.

Außerdem würde ich dir empfehlen, dass du dem User eine gewisse Zeit gibst, um zum DIV-Element "zu kommen", da das DIV-Element verschwinden soll, wenn der User aus dem Span rechts herausfährt. Also, solltest du eine Verzögerung von ca. 250 ms einbauen, damit der User über das DIV-Element gelangt bevor der OnMouseOut-Event des Spans ausgelöst wird. Du musst dann im OnMouseOver-Event des DIV-Elementes nochmals die Funktion zum Anzeigen des DIV-Elementes ausführen, da es ja sonst verschwinden würde.

Ich hoffe meine Denkansätze sind richtig
und hoffentlich hab ich dir damit geholfen.

Re: [HTML/CSS] Div verschwindet wieder...

Ja doch hast mir geholfen, ich werde das "verschwinden" des divs mal auslagern, heißt das ich es nicht mehr ins onMouseOut des divs packe sondern vllt ins onMouseIn des hauptspan's danke für den denkansatz ;)

mfg phlux :hi: