Améliorer le code pour le menu déroulant (HTML/CSS/JavaScript)

Question

Basé sur this tutorial, j'ai construit un menu déroulant pour template from Styleshout.com. medigerati helped me pour que cela fonctionne maintenant - au moins dans Firefox 3.5 et Internet Explorer 8.

You can see the menu in action here.

Mais malheureusement, il ne fonctionne pas bien dans tous les navigateurs. Dans Internet Explorer 6 - par exemple - il n'est pas affiché correctement.

Pourriez-vous s'il vous plaît me dire comment je peux améliorer le code pour le faire fonctionner dans plus de navigateurs?

J'espère que vous pouvez m'aider. Merci d'avance!

HTML:

<ul id="nav"> 
    <li><a href="index.html">Nav #1</a> 
     <ul> 
      <li><a href="#">Nav #1.1</a></li> 

      <li><a href="#">Nav #1.2</a></li> 
     </ul> 
    </li> 
    <li><a href="index.html">Nav #2</a> 
     <ul> 
      <li><a href="#">Nav #2.1</a></li> 
      <li><a href="#">Nav #2.2</a></li> 

     </ul> 
    </li> 
    <li><a href="index.html">Nav #3</a> 
     <ul> 
      <li><a href="#">Nav #3.1</a></li> 
      <li><a href="#">Nav #3.2</a></li> 
     </ul> 

    </li> 
</ul> 

CSS:

ul#nav li ul { 
    position: absolute; 
    left: -9999px; 
    top: 100%; 
    display: block; 
    width: 100px; 
    background-color: transparent; 
} 
ul#nav li { 
    position: relative; 
    float: left; 
} 
/* Links in the drop down lists start */ 
ul#nav li ul li a { 
    clear: left; 
    display: block; 
    text-decoration: none; 
    width: 100px; 
    background-color: #333; 
} 
/* Links in the drop down lists end */ 
/* Making visible start */ 
ul#nav li:hover ul, #nav li.sfhover ul { 
    left: auto; 
} 
/* Making visible end */ 

JavaScript:

sfHover = function() { 
    var sfEls = document.getElementById("nav").getElementsByTagName("LI"); 
    for (var i=0; i<sfEls.length; i++) { 
     sfEls[i].onmouseover=function() { 
      this.className+=" sfhover"; 
     } 
     sfEls[i].onmouseout=function() { 
      this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); 
     } 
    } 
} 
if (window.attachEvent) window.attachEvent("onload", sfHover); 

Answer 1

La liaison d'événements Javascript fonctionne différemment selon les navigateurs. Essayez:

sfHover = function() { 
    var sfEls = document.getElementById("nav").getElementsByTagName("LI"); 
    for (var i=0; i<sfEls.length; i++) { 
     addEvent(sfEls[i], "mouseover", function() { 
      this.className+=" sfhover"; 
     }); 
     addEvent(sfEls[i], "mouseout", function() { 
      this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); 
     }); 
    } 
} 

function addEvent(el, name, func) { 
    if (el.attachEvent) 
     el.attachEvent("on" + name, func); 
    else 
     el.addEventListener(name, func, false); 
} 

addEvent(window, "load", sfHover); 

Quirksmode.org a beaucoup de bons articles sur les événements.

Answer 2

Regardez le Dojo Toolkit toolbar widget. Dojo fonctionne de manière cohérente sur tous les navigateurs et offre même une accessibilité aux utilisateurs handicapés.

Le menu widget lorsqu'il est ancré à la page (comme vu dans l'exemple) peut aussi être ce que vous cherchez.

Answer 3

Faites-vous cela comme un exercice d'apprentissage, ou voulez-vous juste un bon menu de type barre de navigation? Si ce dernier, je recommanderais MenuNav de YUI 3.0, qui est bien testé contre tous les principaux navigateurs, y compris IE6.