グローバルメニューもレスポンシブに こんなに簡単でいいのだろうか?
グローバルナビゲーションも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
ここまでの完成図が以下です。
ブラウザを狭めていくと、メニューが変化します。