如何基金會

Question

添加切換導航菜單按鈕，我使用基金會

，我已閱讀在其網站上的文件，然後我設計我的網站是這樣的導航：

<div class="top-bar BHoma"> 
      <div class="top-bar-left title-bar-left"> 
       <ul class="menu"> 
        <li class="menu-text"><img src="img/text-logo.png" width="100" height="50" title="شرکت طراحی، برنامه نویسی و بازاریابی دانوپ"></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
       </ul> 
      </div> 
      <div class="top-bar-right title-bar-right"> 
       <ul class="menu"> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
       </ul> 
      </div> 
     </div> 

所以基本上我有添加了正確的類屬性，它也是響應式的，但問題是它不顯示任何類型的小設備切換菜單按鈕。我的意思是它只顯示菜單鏈接，而不是在Bootstrap中顯示它們，如navbar-collapse選項！那麼有沒有辦法用Foundation添加一個菜單切換按鈕，或者它只是像這樣結束？

您也可以點擊這個link來查看我正在開發的整個網站。

Answer 1

您需要添加的http://foundation.zurb.com/sites/docs/top-bar.html

<div class="top-bar"> 
 
    <div class="top-bar-title"> 
 
    <span data-responsive-toggle="responsive-menu" data-hide-for="medium"> 
 
     <button class="menu-icon dark" type="button" data-toggle></button> 
 
    </span> 
 
    <strong>Site Title</strong> 
 
    </div> 
 
    <div id="responsive-menu"> 
 
    <div class="top-bar-left"> 
 
     <ul class="dropdown menu" data-dropdown-menu> 
 
     <li> 
 
      <a href="#">One</a> 
 
      <ul class="menu vertical"> 
 
      <li><a href="#">One</a></li> 
 
      <li><a href="#">Two</a></li> 
 
      <li><a href="#">Three</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Two</a></li> 
 
     <li><a href="#">Three</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="top-bar-right"> 
 
     <ul class="menu"> 
 
     <li><input type="search" placeholder="Search"></li> 
 
     <li><button type="button" class="button">Search</button></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>