使用Foundation框架的HTML/CSS中的响应式导航

虽然我在左侧有一个简单的徽标，右侧有两个链接，但我试图复制下面的codepen导航栏。使用的框架是Zurb基金会：https://codepen.io/IamManchanda/pen/LymroM?editors=1000 使用Foundation框架的HTML/CSS中的响应式导航

到目前为止，我似乎无法得到菜单响应。当我使用大窗口时，移动菜单保持不变，并且不会像在笔中那样切换。任何想法如何复制这个？

模板：

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

提前感谢！

来源

2017-07-16 lnamba

我意识到我没有在JavaScript中调用$(document).foundation();。哎呀！

来源

2017-07-16 01:54:50 lnamba

使用Foundation框架的HTML/CSS中的响应式导航

回答

相关问题