[JS] DropDown Menu

[osorkon!]

Ik heb het volgende menu:

HTML:

<table>
   <tr>
       <td>
             <ol>
                    <li onclick="showMenu('m1');"><a href="javascript:void(0);">Iets</a>
                         <ul id="m1">
                               <li><a href="">Nog iets</a></li>
                <li><a href="">En nog iets</a></li>
                         </ul>
                    </li>
             </ol>
       </td>
   </tr>
</table>

Is met css opgemaakt en de <ul> staat display none.

Heb ook volgend script:

JavaScript:

function showMenu(id){
    if(document.getElementById(id)!=null){
        if(document.getElementById(id).style.display=='none'){
            document.getElementById(id).style.display = 'block';
        }
        else
            document.getElementById(id).style.display = 'none';
    }
}

function hideMenu(id){
    if(document.getElementById(id)!=null){
        document.getElementById(id).style.display = 'none';
    }
}

Dit werkt allemaal heel goed, maar nu moet je terug op de link 'iets' drukken om het menu te verbergen, kan ik niet op 1 of andere manier dit ook verbergen door met men muis buiten het uitklapmenutje te klikken, of wanneer je met je muis uit het uitklapmenu gaat?

[marko77]

Ja dat kan wel, echter dan zul je met hovers moeten werken.

Suckerfish is wat je nodig hebt, zie hier

[disjfa]

document.body.onclick
Of een onmouseout.

Gewone functies, staan gewoon in de handleiding. Veel plezier met maken.

[osorkon!]

Bij onmouseout wil hij het niet doen, verbergt van zodra je uit de link 'iets' gaat.

document.body.onclick
Fout: document.body has no properties

marko77 schreef op woensdag 25 juli 2007 @ 14:30:
Ja dat kan wel, echter dan zul je met hovers moeten werken.

Suckerfish is wat je nodig hebt, zie hier

Dit heb ik nu, maar zou graag naar een onclick menu gaan

[ Voor 80% gewijzigd door osorkon! op 25-07-2007 14:37 ]

[funkwurm]

osorkon! schreef op woensdag 25 juli 2007 @ 14:32:
document.body.onclick
Fout: document.body has no properties

Je kunt alhier vinden dat het document.onclick is, niet document.body.onclick.

[Fuzzillogic]

Houd je er ook rekening mee dat Javascript unobtrusive zou moeten zijn, en dat de site ook zonder javascript te navigeren dient te zijn?

En waar dient die table voor?

[osorkon!]

Fuzzillogic schreef op woensdag 25 juli 2007 @ 14:57:
Houd je er ook rekening mee dat Javascript unobtrusive zou moeten zijn, en dat de site ook zonder javascript te navigeren dient te zijn?

Is voor lokaal scriptje voor mijzelf, hoeft dus niet echt

Die table: kheb maar een stukje van de html gepost, is nutteloos de hele boel te plakken.

Iemand oplossing?

[ Voor 69% gewijzigd door osorkon! op 25-07-2007 15:49 ]

[funkwurm]

Wat heb je allemaal al geprobeerd nu je weet dat het document.onclick is?

[osorkon!]

Kweet eigenlijk niet hoe ik die document.onclick kan gebruiken ivm met men menu?

[funkwurm]

Je wil dat als er naast het menu geklikt wordt, dat het menu inklapt. Als er naast het menu geklikt wordt, zal dit een onclick fireren op het document-object, maar niet op de ul zelf. Dus daarmee moet je testen of er buiten de ul geklikt is en de div verbergen.

[osorkon!]

Fixed

http://paste.css-standards.org/20682

[osorkon!]

Update: Weet iemand soms of het mogelijk is om een delay aan het menu te hangen, zodat bij mouseout je nog een secondje het menu ziet?

[Mei]

osorkon! schreef op woensdag 01 augustus 2007 @ 19:00:
Update: Weet iemand soms of het mogelijk is om een delay aan het menu te hangen, zodat bij mouseout je nog een secondje het menu ziet?

Mouseout eventhandler aan het menu hangen. Bij uitvoeren timeoutje laten lopen. Na de seconde menu verbergen. Als het menu weer gehovered wordt de timeout cancellen.

marko77 schreef op woensdag 25 juli 2007 @ 14:30:
Ja dat kan wel, echter dan zul je met hovers moeten werken.

Suckerfish is wat je nodig hebt, zie hier

Doe het dan gelijk goed en doe Son of Suckerfish in plaats van het verouderde eerste artikel

[osorkon!]

JavaScript:

window.onload = function(){

              var childs = document.getElementById('menu').childNodes, i = childs.length;

              while(i--) {

                      if(childs[i].tagName == 'LI') {

                              childs[i].onclick = function() {

                                      var child = this.getElementsByTagName('ul')[0];

                                      child.style.display = 'block';

                                      child.onmouseover = function(){

                                              this.style.display = 'block';

                                      };

                                      child.onmouseout = function(){

                                              this.style.display = 'none';

                                      };

                              };

                      }
 
              }
 
      };

Kan dit in het huidige scriptje toegepast worden?

Edit: typfoutje

[ Voor 3% gewijzigd door osorkon! op 02-08-2007 18:14 ]