Question

我正在尝试使用前端框架Foundation创建一个网站。我目前正在为这个网站的“顶栏”菜单工作。我已经实现了台式电脑的菜单;但是，我不能让菜单出现在小于940px宽的窗口中。换句话说，该菜单不会出现在手机和平板电脑设备上。

我希望顶部栏的内容在屏幕尺寸变小时堆叠。除此之外，我对Foundation的理解是它实现了必要的JavaScript以在幕后创建可折叠菜单（这是正确的吗？）。理想情况下，菜单图标按下时菜单也会增大和折叠。关于如何解决这个问题的建议？此外，如果我错过了与此有关的基金会文件的关键部分，我将很感激被指向它。

我的代码如下：

<!DOCTYPE html>
<html>

<head>

    <!-- Foundation and my own CSS -->
    <link rel="stylesheet" type="text/css" href="css/foundation.css">
    <link rel="stylesheet" type="text/css" href="css/foundation.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">

    <!-- Foundation and jQuery -->
    <script src="js/foundation/foundation.js"></script>
    <script src="js/foundation.min.js"></script>
    <script src="js/foundation/foundation.topbar.js"></script>
    <script src="js/foundation/foundation.dropdown.js"></script>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/app.js"></script>

    <?php if (isset($title)): ?>
        <title>Joe Smith | <?= htmlspecialchars($title) ?></title>
    <?php else: ?>
        <title>Joe Smith</title>
    <?php endif ?>

</head>

<body>

<script>
    $(document).ready(function() {
        $(document).foundation();
    }
</script>

<nav class="top-bar">
<ul class="title-area">
    <li class="name"><a href="index.php"><h1>Joe Smith</h1></a></li>

    <!-- Mobile-only menu icon -->
    <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
</ul>

<section class="top-bar-section">
    <ul class="left">
        <li><i>Computer Scientist</i></li>
    </ul>
    <ul class="right">
        <li class="active"><a href="about.php">ABOUT</a></li>
        <li><a href="projects.php">PROJECTS</a></li>
        <li><a href="blog.php">BLOG</a></li>
        <li><a href="../files/resume.pdf">RESUME</a></li>
        <li><a href="contact.php">CONTACT</a></li>
    </ul>
</section>
</nav>

</body>
</html>

Answer 1

你的代码必须像那样

<html>
<body>
.......
<script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>

  <script src="js/foundation.min.js"></script>

  <script>
    $(document).foundation();
  </script>
</body>
</html>

<sript>必须在</body>

之前

Answer 2

请在添加了“top-bar”类的标签上添加“data-topbar”属性以下是一个如何添加此内容的示例：

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

Answer 3

因此，使用Foundation实现导航栏依赖于遵循一些约定。 Foundation JavaScript库在HTML元素中查找特定的数据属性，因此最佳做法是遵循基本模板，如下所示：

<nav class="top-bar" data-topbar>
    <ul class="title-area">
        <li class="name"></li>
        <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
    </ul>
    <section class="top-bar-section">

    ...

    </section>
</nav>

其类为name的列表项，以防您想在导航中显示网站的主标题。将文本保留在此元素之外是可以的，但要确保元素本身仍在那里并且不要使用自动关闭标记（例如<li class="name" />）。

在小型设备中查看时，其类为toggle-topbar menu-icon的下一个列表项是菜单的主标题或导航栏。确保您按原样使用此元素，并确保确保不使用白色白色文本颜色/背景覆盖样式。最后一点很重要，因为我发现当我以这样的方式设计导航时它实际上正确渲染，但具有相同的前景色和背景色。

最后，正如@Shamim Hasan已经注意到的那样，请确保在导航元素的属性中声明data-topbar。这是基金会在渲染菜单时所寻找的。

top-bar-section部分可以或多或少地拥有你想要的任何东西。

如何在基金会实施移动“顶级酒吧”？

3 个答案: