改进下拉菜单的代码（HTML/CSS/JavaScript）

基于this tutorial，我为template from Styleshout.com构建了一个下拉菜单。 medigerati helped me使现在的工作 - 至少在Firefox 3.5和Internet Explorer 8改进下拉菜单的代码（HTML/CSS/JavaScript）

You can see the menu in action here.

但不幸的是，它并不能很好地在所有的浏览器。例如，在Internet Explorer 6中，显示不正确。

请问我可以如何改进代码以使其在更多浏览器中工作？

我希望你能帮助我。提前致谢！

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);

来源

2009-08-07 caw

Javascript事件绑定在不同的浏览器中工作方式不同。尝试：

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有很多关于事件的好文章。

来源

2009-08-07 15:45:32 Joel

谢谢。但我的旧代码和新代码之间究竟有什么区别？ – caw 2009-08-07 17:33:18

注意addEvent函数？该功能以跨浏览器兼容的方式附加事件。这是必要的，因为不是所有浏览器都喜欢'sfEls [i] .onmouseout ='或'element.attachEvent（...）'。 – Joel 2009-08-07 18:45:46

它不起作用！起初，我认为它会，但我不会看到它没有。菜单正确下拉。但他们不再关闭。看到这里：http://wp1080088.wp029.webpack.hosteurope.de/Refresh1-1/我能做什么？为什么是这样？ – caw 2009-08-08 12:38:37

看那Dojo Toolkit toolbar widget。 Dojo可以在所有浏览器中始终如一地工作，甚至为残障用户提供可访问性。

挂钩到页面的menu widget（如示例中所示）也可能是您要查找的内容。

来源

2009-08-07 15:43:31 aehlke

你是在做这个学习练习，还是你只是想要一个好的导航栏菜单？如果是后者，我会推荐YUI 3.0的MenuNav，它对包括IE6在内的所有主流浏览器都有很好的测试。

来源

2009-08-07 15:45:47 Nate

改进下拉菜单的代码（HTML/CSS/JavaScript）

回答

相关问题