グローバルメニューもレスポンシブに こんなに簡単でいいのだろうか?

Foundation Global Navigation2
,

グローバルナビゲーションもFoundationにおまかせです。レスポンシブなメニューが簡単に作成できます。
大元は、Foundationのサイトからコピーしてきます。

http://foundation.zurb.com/sites/docs/responsive-navigation.html

「Responsive Toggle」のコードをコピーして修正していきます。

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

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

検索窓やネストされているところを削除して修正したものがこちら。
(2016/04/02 l.11を修正しました。)

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

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="vertical medium-horizontal menu">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
</div>
</div>
<!-- /navigation -->

Oneの「Vertical Menu」は残して、他に展開してもいいかもしれませんね。
以下のドキュメントの「Active State」などで見栄えをよくします。いろいろとオプションもありますから、カスタマイズもやり甲斐があります。
http://foundation.zurb.com/sites/docs/menu.html

ここまでの完成図が以下です。

Foundation Global Navigation

ブラウザを狭めていくと、メニューが変化します。

Foundation Global Navigation2