Foundation トップナビゲーションバー
トップナビゲーションバーをページのヘッダーに配置：
例
<ul class="title-area">
<li class="name">
<!-- タイトルやアイコンが不要な場合は削除できます -->
<h1><a href="#">WebSiteName</a></h1>
</li>
<!-- 小画面での折りたたみボタン: 削除するには、.menu-iconクラスを削除して、アイコンを削除できます。
画像のみを表示する必要がある場合は、"Menu" テキストを削除できます。 -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</section>
</nav>
<!-- Foundation JS を初期化 -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
試してみる »
例の解説
使用<nav class="top-bar" data-topbar>標準ツールバーを作成します。.title-areaクラスはサイトのロゴ領域を定義します (必ずli.name内に配置する必要があります)。画面が小さくなると、"menu" ボタンが表示されます。Foundation のメニューは画面サイズに応じて自動的に折りたたんだり展開したりします：
小画面では、サイズの理由により多くのオプションが非表示になります。li.toggle-topbar menu.iconクラスはメニューボタンを作成し、それをクリックすると非表示のオプションが表示されます。
ヒント：ブラウザウィンドウのサイズを変更して効果を確認してください。
.top-bar-sectionナビゲーションのリンク部分を定義します。.leftクラスはリンクを左揃えに指定します。.activeクラスは選択された項目を表示するために使用され、背景は青になります。
ヒント：ナビゲーションリンクを右揃えにしたい場合は、.leftに変更できます.right :
左揃えと右揃えを同時に設定できます：
例
<ul class="left">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="right">
<li><a href="#">Sign Up</a></li>
<li><a href="#">Login</a></li>
</ul>
</section>
試してみる »
ナビゲーションバーは.dividerクラスを使用して区切り線を追加できます (大画面では垂直線、小画面では水平線)：
例
<li class="active"><a href="#">Home</a></li>
<li class="divider"></li>
<li><a href="#">Page 1</a></li>
<li class="divider"></li>
<li><a href="#">Page 2</a></li>
<li class="divider"></li>
<li><a href="#">Page 3</a></li>
<li class="divider"></li>
</ul>
試してみる »
ナビゲーションバーのドロップダウンメニュー
トップナビゲーションバーにドロップダウンメニューを設定できます。
次のようにして、<li>要素に追加する.has-dropdownクラスを使用してドロップダウンメニューを設定します：
例
<ul class="left">
<li class="active"><a href="#">Home</a></li>
<li class="has-dropdown">
<a href="#">Dropdown</a>
<ul class="dropdown">
<li><a href="#">First link in dropdown</a></li>
<li><a href="#">Second link in dropdown</a></li>
<li class="active"><a href="#">Active link in dropdown</a></li>
</ul>
</li>
</ul>
</section>
試してみる »
区切り線
使用.dividerクラスを使用してドロップダウンメニューの区切り線を設定します：
例
<li><a href="#">Apple</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Orange</a></li>
<li class="divider"></li>
<li><a href="#">Kale</a></li>
<li><a href="#">Spinach</a></li>
</ul>
ドロップダウンメニューのラベル
に<li>内に追加する<label>要素を使用してドロップダウンメニューのラベル(タイトル)を設定します：
例
<li><label>Fruit</label></li>
<li><a href="#">Apple</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Orange</a></li>
<li class="divider"></li>
<li><label>Vegetable</label></li>
<li><a href="#">Kale</a></li>
<li><a href="#">Spinach</a></li>
</ul>
ネストされたドロップダウンメニュー
ドロップダウンメニューの中にさらに別のドロップダウンメニューを埋め込むことができます：
例
<ul class="left">
<li class="has-dropdown">
<a href="#">Dropdown</a>
<ul class="dropdown">
<li><label>Level 1</label></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="has-dropdown">
<a href="#">New dropdown</a>
<ul class="dropdown">
<li><label>Level 2</label></li>
<li><a href="#">2nd level dropdown</a></li>
<li><a href="#">2nd level dropdown</a></li>
<li class="has-dropdown">
<a href="#">New dropdown</a>
<ul class="dropdown">
<li><label>Level 3</label></li>
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
試してみる »
クリック可能
デフォルトでは、ナビゲーションバーのドロップダウンメニューはマウスを移動すると表示されます。次を使用できます：data-options="is_hover: false"属性を使用して、ナビゲーションバーをマウスクリック後に表示するように設定します：
ナビゲーションバー上のボタンとアイコン
ナビゲーションバーにアイコンやボタンを配置できます：
ナビゲーションバーにアイコンを配置できます。より多くのアイコンスタイルは、Foundation アイコンチュートリアル:
例
<!-- Foundation アイコンスタイル -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/foundation-icons.min.css">
</head>
<ul class="left">
<li class="active"><a href="#"><i class="fi-home"></i> Home</a></li>
<li><a href="#"><i class="fi-torso"></i> Sign Up</a></li>
<li><a href="#"><i class="fi-magnifying-glass"></i> Search</a></li>
</ul>
試してみる »
固定ナビゲーションバー
ナビゲーションバーはページの上部に固定できます。
ページをスクロールしても、ナビゲーションバーは上部で動きません。
ナビゲーションバーを固定するには、ナビゲーションバーを<div class="fixed">内に配置するだけです：
ナビゲーションバーの絶対配置
ナビゲーションバーを<div class="sticky">内に配置してナビゲーションバーの絶対配置を設定できます。スクロールバーがその領域までスクロールすると、ナビゲーションバーは固定ナビゲーションバーのように上部で動きません：
を使用する場合、.stickyクラスを使用すると、トップナビゲーションバーはすべての画面サイズで固定されます。特定の画面で設定する必要がある場合は、<nav>上に追加するdata-options="sticky_on: small|medium|large"属性だけで十分です：
例
<!-- 大画面のみ -->
<nav class="top-bar" data-topbar data-options="sticky_on: large">
..
</nav>
</div>
または、配列を使用して複数の画面サイズを設定します：
例
<!-- 小画面と大画面 (中画面なし)-->
<nav class="top-bar" data-topbar data-options="sticky_on: [small, large]">
..
</nav>
</div>