改進下拉菜單的代碼（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）

回答

相關問題