爲什麼Zurb Foundation Top Bar不工作？

我正在學習頂級欄設計的Foundation 4.0。我的目標就像教程一樣，當寬度變得越來越窄時，菜單項的滑動效果就越好。我下面的文件： http://foundation.zurb.com/old-docs/f3/navigation.php#topbarCode 爲什麼Zurb Foundation Top Bar不工作？

<div class="row"> 
<div class="twelve columns"> 
<nav class="top-bar"> 
    <ul> 
    <!-- Title Area --> 
    <li class="name"> 
     <h1> 
     <a href="#"> 
      Top Bar Title 
     </a> 
     </h1> 
    </li> 
    <li class="toggle-topbar"><a href="#"></a></li> 
    </ul> 

    <section> 
    <!-- Left Nav Section --> 
    <ul class="left"> 
     <li class="divider"></li> 
     <li class="has-dropdown"> 
     <a class="active" href="#">Item 1</a> 
     <ul class="dropdown"> 
      <li><label>Section Name</label></li> 
      <li class="has-dropdown"> 
      <a href="#" class="">Level 1, Has Dropdown</a> 
      <ul class="dropdown"> 
       <li><a href="#">Level 2</a></li> 
       <li><a href="#">Level 2</a></li> 
       <li class="has-dropdown"><a href="#">Level 2, Has Dropdown</a> 
       <ul class="dropdown"> 
        <li><label>Section</label></li> 
        <li><a href="#">Level 3</a></li> 
        <li><a href="#">Level 3</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Level 3</a></li> 
       </ul> 
       </li> 
       <li><a href="#">Level 2</a></li> 
       <li><a href="#">Level 2</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Level 1</a></li> 
      <li><a href="#">Level 1</a></li> 
      <li class="divider"></li> 
      <li><label>Section Name</label></li> 
      <li><a href="#">Level 1</a></li> 
      <li><a href="#">Level 1</a></li> 
      <li><a href="#">Level 1</a></li> 
      <li class="divider"></li> 
      <li><a href="#">See all &rarr;</a></li> 
     </ul> 
     </li> 
     <li class="divider hide-for-small"></li> 
    </ul> 

    <!-- Right Nav Section --> 
    <ul class="right"> 
     <li class="divider show-for-medium-and-up"></li> 
     <li class="has-dropdown"> 
     <a href="#">Item 2</a> 
     <ul class="dropdown"> 
      <li><label>Section Name</label></li> 
      <li><a href="#" class="">Level 1</a></li> 
      <li><a href="#">Dropdown Option</a></li> 
      <li><a href="#">Dropdown Option</a></li> 
      <li class="divider"></li> 
      <li><label>Section Name</label></li> 
      <li><a href="#">Dropdown Option</a></li> 
      <li><a href="#">Dropdown Option</a></li> 
      <li><a href="#">Dropdown Option</a></li> 
      <li class="divider"></li> 
      <li><a href="#">See all &rarr;</a></li> 
     </ul> 
     </li> 
    </ul> 
    </section> 
</nav> 
</div> 
</div>

我用這個代碼完全一樣的我的環境。然而，菜單是這樣的：

1 http://img543.imageshack.us/img543/6249/yte.png

這不是我所希望擁有的。有沒有人有和我一樣的問題？

來源

2013-06-19 HanYi Zhang

我已經得到它的工作，請看看上[JS斌（http://jsbin.com/opaqum/3/edit）的代碼，也看[全屏預覽]（http://jsbin.com/opaqum/3/） –

我也得到了它的工作。我將所有js文件都包含在頁面中，以便問題消失。你的代碼更好，更清潔，Praveen。謝謝！這是我的難題：presentation.css不是在一個包，但它被廣泛地在基金會網站4使用。 –

根據github上的[comment]（https://github.com/zurb/foundation/issues/27#issuecomment-2508644），** presentation.css **包含市場營銷網站和文檔的特定樣式 - 不是主要基礎包的一部分。您可以通過檢查整個回購來獲取這些文件。 –

加載所有的js文件基金會4提供

來源

2013-06-27 18:27:36

爲什麼Zurb Foundation Top Bar不工作？

回答

相關問題