Zurb Foundation 頂欄無法在小屏幕上運行

Question

我剛剛開始使用基礎，坦率地說，自從我建立我的上一個網站以來已經有一段時間了。 所以請耐心等待我。

我現在處理菜單（頂欄）的問題已經超過一天了，但找不到線索出了什么問題。

問題是，我真的只需要一個基本菜單，它可以切換到小屏幕上的標准漢堡菜單，到目前為止一切順利，它應該像文檔中演示的那樣工作，對嗎？ 但不幸的是它沒有，我無法弄清楚為什么。

我希望你能幫助我。 我在下面添加了沒有內容的代碼。 該文件位於子目錄中，這就是為什么所有目錄引用都以 ../ 開頭。

已經非常感謝了！ 在一個

<!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>

Answer 1

比較你的代碼行：

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

與 Foundation 文檔中的相應內容：

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

您的錯誤現在應該很明顯了，並且會阻止 Top Bar 正常運行。

附加建議：下次您想使用 Foundation 的預定義功能時，復制並粘貼代碼，然后將更改應用於它。 看來您已經重寫了它，並且不小心認為“data-topbar”是一個類。

Answer 2

附加：在小屏幕（最大 640px 范圍）中將導航粘貼在頂部

“sticky_on：[小]；scrolltop：false”

並在您需要的移動視圖中顯示父鏈接

“mobile_show_parent_link：真；”

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

Zurb Foundation 頂欄無法在小屏幕上運行

問題描述

2 個解決方案

解決方案1
1 2015-09-07 11:13:51

解決方案2
0 已采納 2015-09-16 19:35:41

Zurb Foundation 頂欄無法在小屏幕上運行

問題描述

2 個解決方案

解決方案1 1 2015-09-07 11:13:51

解決方案2 0 已采納 2015-09-16 19:35:41

解決方案1
1 2015-09-07 11:13:51

解決方案2
0 已采納 2015-09-16 19:35:41