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