基金会导航

Question

我在与Zurb的基础导航问题（我是新来这和我有一个陡峭的学习曲线，我已经打了一堵墙）

我愿做一对夫妇东西：

1. 当顶栏被切换时，在左侧有“菜单图标”。
2. 我想有三个部分，当顶栏被触发（名称/中东/菜单）

任何意见或帮助将不胜感激！

<nav class="top-bar"> 
<ul class="title-area"> 
<!-- Title Area --> 
<li class="name"><a href="index.html"></a><h1>Title</h1></li> 
<li class="toggle-topbar menu-icon"><a href="#"><span>MENU</span></a></li> 
</ul> 
    <section class="top-bar-section"> 

<!-- Right Nav Section --> 
    <ul class="right"> 
    <li class="divider"></li> 
    <li><a href="#"></a></li> 
    <li class="divider"></li> 
    <li class="has-dropdown"> <a href="#"></a> 
    <ul class="dropdown"> 
      <li class="divider"><a href="#"></a></li> 
      <li class="divider"><a href="#"></a></li> 
      <li class="divider"><a href="#"></a></li> 
      <li class="divider"><a href="#"></a></li> 



    </ul> 
    </li> 
    <li class="divider"></li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
</section> 

Answer 1

尝试使用此代码：

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

    <section class="top-bar-section"> 
    <!-- Right Nav Section --> 
    <ul class="right"> 
     <li class="has-dropdown"> 
     <a href="#">Menu</a> 
     <ul class="dropdown"> 
      <li><a href="#">First link in dropdown</a></li> 
      <li><a href="#">Second link in dropdown</a></li> 
     </ul> 
     </li> 
    </ul> 
    </section> 
</nav> 

下去：http://foundation.zurb.com/docs/components/topbar.html#