html - 使用 Foundation 框架在 HTML/CSS 中响应式导航

Question

尽管左侧有一个简单的 Logo ，右侧有两个链接，但我正在尝试复制以下代码笔导航栏。使用的框架是Zurb Foundation:https://codepen.io/IamManchanda/pen/LymroM?editors=1000

到目前为止，我似乎无法让菜单响应。当我使用大窗口时，移动菜单保持不变，不会像笔中那样切换。有什么想法可以复制吗？

模板:

<div class="title-bar" data-responsive-toggle="navbar" data-hide-for="medium">
   <button class="menu-icon" type="button" data-toggle="navbar"></button>
   <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="navbar">
  <div class="top-bar-left">
    <ul class="menu">
      <li class="menu-text">
        <a href="http://www.hanyu.co/default.aspx"><img id="logo" src="./assets/img/logo4white.png" alt="logo">HANYU.CO</a>
      </li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li id="home"><router-link class="link align-left" to="/">Home</router-link></li>
      <li id="logout" v-if="this.$cookies.get('user')" @click="logout"><a>Logout</a></li>
    </ul>
  </div>
</div>

提前致谢!

Answer 1

我意识到我没有在 JavaScript 中调用 $(document).foundation();。糟糕!