1

我正在尝试使用前端框架 Foundation 创建一个网站。我目前正在为该站点开发“顶部栏”菜单。我已经为台式计算机实现了菜单；但是，我无法让菜单出现在宽度小于 940 像素的窗口中。换句话说，菜单不会出现在移动设备和平板设备上。

我希望顶部栏的内容随着屏幕尺寸变小而堆叠。此外，我对 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>
4

3 回答 3

0

请在您添加类“top-bar”的标签上添加“data-topbar”属性
这是一个如何添加的示例：

<nav class="top-bar" data-topbar>
于 2014-01-19T23:02:28.143 回答
0

因此，使用 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在小型设备中查看时，其类是菜单的主标题或导航栏的下一个列表项。确保您拥有此元素，并确保您没有使用 white-on-white text color / background 覆盖样式。最后一点很重要，因为我在设置导航样式时发现它实际上可以正确渲染，但具有相同的前景色和背景色。

最后，正如@Shamim Hasan 已经指出的那样，确保您data-topbar在导航元素的属性中声明了。这是 Foundation 在渲染菜单时所寻找的。

该top-bar-section部分或多或少可以包含您想要的任何内容。

于 2014-03-28T08:09:19.770 回答
0

你的代码必须像那里一样

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

于 2013-11-14T19:13:37.393 回答