mouseOver DIVje

[error403]

Ik ben bezig geweest met een dropUp menu aan de onderkant van een website. Ik kwam erachter dat een goede dropup ongeveer onmogelijk is omdat dit altijd ruimte onder het menu opeist. Maar dat is niet mijn probleem.

Ik hoef geen dynamish dropup menu, ik wil hem graag handmatig updaten en dacht dus, gewoon een divje visible / niet visible trogglen. Dit lukte op Firefox, Safari(mac) en Firefox(mac) maar IE gaat flikkeren als ik over de items in het menu scroll.

zou iemand weten wat ik hier fout doe?
Simpel script zit in de index.html

download mijn bestanden

 

[w.sickman]

Beste Error,

De link naar download mijn bestanden bevat een leuke site die een hoop troepjes opent dus ik neem even niet de moeite om daar doorheen te waggelen.

Je gebruikt zo te lezen een <div>. Het probleem hier kan veroorzaakt worden doordat je een " onmouseout" veroorzaakt wanneer je door je <div> scrolled. Gebruik je UL/LI dan heb je dit probleem niet, omdat je in je tag blijft.

<div>
  <a>trigger</a>
</div>
<div>
  <a>menu</a>
</div>

In het geval van ul:

<ul>
  <li><a>trigger</a>
    <ul class="hidden">
       <li>
          <a>menu</a>
       </li>
     </ul>
  </li>
</ul>

Als je nu de <li> als trigger gebruikt dan zul je nooit een onmouseout krijgen als je door het menu aan het bladeren bent, omdat je nog steeds in de <li> zit.

Code:

<ul>
  <li onmouseover="javascript:document.getElementById('submenu').style.display='block';"  onmouseout="javascript:document.getElementById('submenu').style.display='none';" ><a>trigger</a>
    <ul id="submenu">
       <li>
          <a>menu</a>
       </li>
     </ul>
  </li>
</ul>

Dit is natuurlijk een voorbeeld code. Je kunt het heel fancy oplossen door submenu's te kenmerken met een class en vervolgens via javascript alle gekenmerkte submenu's voorzien van triggers ed. Maar de essentie zit in het script hierboven.

Wout

 

[error403]

Hey Wout,

Super bedankt voor je uitleg en toelichting!!!! Het werkt en ik kan hem idd aan alle kanten nog aanpassen, super super super!