基金會導航

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#