Zurb基金會頂級酒吧不能在小屏幕上工作

我剛開始使用基金會並坦率地說，自從我建立了我的最後一個網站以來，我已經有一段時間了。所以請對我寬容。Zurb基金會頂級酒吧不能在小屏幕上工作

我現在處理我的菜單（頂部欄）問題一整天，並且找不到線索發生了什麼問題。

事情是，我真的只需要一個基本的菜單，這是一個小屏幕上的標準漢堡菜單，到目前爲止非常好，它應該像在文檔中證明的那樣工作嗎？但不幸的是，它不，我不知道爲什麼。

我希望你能幫助我。我將下面的內容添加到我的代碼中。該文件位於一個子目錄中，這就是爲什麼所有的目錄引用都是以../開頭的。

非常感謝！伊娜

<!doctype html> 
<html class="no-js" lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Inas | Ernährungs Coaching</title> 
    <link rel="stylesheet" href="../css/foundation.css" /> 
    <link rel="stylesheet" href="../css/additionals.css" /> 
    <script src="../js/vendor/modernizr.js"></script> 

</head> 
<body> 
    <div id="wrap"> 
    <div id="header"> 
     <div class="row"> 
      <div class="large-12 columns clearfix"> 
      <!-- a header --> 
      </div> 
     </div> 
     <br> 
     <div class="row"> 
      <div class="small-12 columns"> 
       <!-- Navigation --> 
       <div class="contain-to-grid sticky"> 
        <nav class="top-bar data-topbar" > 
         <ul class="title-area" > 
          <li class="name"> 
           <h1></h1> 
          </li> 
          <li class="toggle-topbar menu-icon"><a href="#"><span>Men&uuml;</span></a> 
          </li> 
         </ul> 


         <section class="top-bar-section"> 
          <ul> 
           <li><a href="index.php">Start</a></li> 
           <li class="divider"><li> 
           <li><a href="index.php?page=angebot">Angebot</a></li> 
           <li class="divider"><li> 
           <li><a href="index.php?page=aktuelles">Aktuelles</a></li> 
           <li class="divider"><li> 
           <li><a href="index.php?page=mich">&Uuml;ber Mich</a></li> 
           <li class="divider"><li> 
           <li><a href="index.php?page=kontakt">Kontakt</a></li> 
          </ul> 
         </section> 
        </nav> 
       </div><!-- /navigation --> 
      </div> 
     </div> 
    </div> 


    <div id="main"> 
     <!-- some content --> 
    </div> 

    <div id="footer"> 
     <!-- a footer --> 
    </div> 
</div> 

    <script src="../js/vendor/jquery.js"></script> 
    <script src="../js/foundation.js"></script> 
    <script src="../js/foundation/foundation.topbar.js"></script> 
    <script> 
    $(document).foundation(); 
    </script> 
</body> 
</html>

來源

2015-09-06 Ina Shn

產生額外：在小屏幕上粘導航（最多640像素的範圍）

「sticky_on：[小]; scrollTop的：假」移動視圖

，並顯示父鏈接則需要

「mobile_show_parent_link：true;」

<nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: [small]; scrolltop: false; mobile_show_parent_link: true;">

來源

2015-09-16 19:35:41

非常感謝，這讓我接受了解決方案：o） –

比較你的代碼行：

<nav class="top-bar data-topbar" >

與對應的從基金會的文檔：

<nav class="top-bar" data-topbar role="navigation">

你的錯誤應該是現在很明顯，可以防止頂酒吧從功能正常。

其他建議：下次要使用Foundation的預定義功能時，請複製並粘貼代碼，然後然後對其應用更改。看起來你已經重寫了它，並且意外地認爲「數據頂部」是一個類。

來源

2015-09-07 11:13:51 droolcup

是的我從那個錯誤中學到了...非常感謝！ –

Zurb基金會頂級酒吧不能在小屏幕上工作

回答

相關問題