コンポーネント

Foundationで用意されている構成要素の説明。

グローバルナビ Top Bar

Foundationで用意されているナビゲーションバー、Top Barの紹介。タイトルは分かりやすいように主にグローバルナビで使用されるコンポーネントということでつけています。
Bootstrap3でのNavbarと同等のナビゲーションです。

グローバルナビの基本

Top Barの簡単な一例です。ウインドウサイズをスマホサイズ以下にするとハンバーガーメニューなります。Bootstrap3のような白ベースのメニューや角が丸いメニュー、下部固定メニューなどはFoundation5では標準では用意されていません。逆にFoundation5は途中から追随するメニューがあります。

Top Bar使用するにあったっての最低限のソースコードが下記になります。

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

        <section class="top-bar-section">
          <ul>
            <li><a href="#">Link01</a></li>
            <li class="active"><a href="#">Link02</a></li>
            <li><a href="#">Link03</a></li>
          </ul>
        </section>
      </nav>

ソースの1行目から簡単に説明してきます。
.top-barでナビゲーションバーを使用しますと指定。
また、データ属性のdata-topbarを一緒に指定します。

      <nav class="top-bar" data-topbar>

2行目から5行目でタイトルとスマホ用のハンバーガーメニューを設定しています。
.title-areaでタイトルエリアであることを設定。
.nameでサイトタイトルなどを指定。※こちらではタイトルを使用していませんがこちらの指定を残さないとスマホサイズにした時にハンバーガーメニューにならないようなので残しています。
4行目でハンバーガーメニューを設定しています。リストに.toggle-topbar.menu-iconを指定しリンク先をspanタグで囲みます。
※Menuなどテキストを付けない場合もspanタグに対してハンバーガーメニューのスタイルを設定しているのでspanタグは必須になります。

      <ul class="title-area">
        <li class="name"></li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
      </ul>

7行目からは実際のリンクの設定になります。
ulタグを囲む親タグに.top-bar-sectionを指定します。
リストタグに.activeを指定することで現在のページを明示でき背景色が変わります。

      <section class="top-bar-section">
        <ul>
          <li><a href="#">Link01</a></li>
          <li class="active"><a href="#">Link02</a></li>
          <li><a href="#">Link03</a></li>
        </ul>
      </section>

グローバルナビのバリエーション

サイト名入り

ナビゲーションにサイト名を入れたパターン。
.title-areaを指定したリストに.nameを指定し見出しタグのh1~h6でタイトルを設定し内側にリンクを設定します。※リンクを設定しないとテキストの色が白くなりません。

      <nav class="top-bar" data-topbar>
        <ul class="title-area">
          <li class="name"><h1><a href="#">Foundation5の使い方</a></h1></li>
          <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>
リンクの右寄せ、左寄せ

リストタグに.rightを指定すると右寄せに、.leftを指定することで左寄せになります。

      <section class="top-bar-section">
        <ul class="right">
        ...
        </ul>
        <ul class="left">
        ...
        </ul>
      </section>
ドロップダウンメニュー

ドロップダウンメニューになるリストタグに.dropdownを指定。ドロップダウンメニューにする部分全体を囲むリストに.has-dropdownを指定。

      <section class="top-bar-section">
        <ul>
          <li class="has-dropdown">
            <a href="#">Dropdown menu</a>
            <ul class="dropdown">
              <li><a href="#">Link01</a></li>
              <li><a href="#">Link02</a></li>
              <li><a href="#">Link03</a></li>
            </ul>
          </li>
        </ul>
      </section>
クリックで開くドロップダウンメニュー

標準では、ドロップダウンメニューはロールオーバーで開きますがデータ属性のdata-options="is_hover: false"を追記することでクリックして開くドロップダウンメニューにできます。
※Bootstrap3ではクリックして開くのが標準でロールオーバーで開くにはcssのカスタマイズが必要です。

      <nav class="top-bar" data-topbar data-options="is_hover: false">
      

上部固定のグローバルナビ

上部固定メニュー

メニュー全体を.fixedで囲むと上部固定のメニューになります。リンクはカラム関係なく、左寄せになります。

      <div class="fixed">
        <nav class="top-bar" data-topbar>
          ...
        </nav>
      </div>

上記のデモページを別ページに用意しましたので表示の確認をしてみてください。

上部固定メニュー(リンク表示を本体カラムに合わせる)

メニュー全体を.contain-to-grid.fixedを併記することでリンクの表示が本体カラムのサイズに合わせた上部固定のメニューになります。

      <div class="contain-to-grid fixed">
        <nav class="top-bar" data-topbar>
          ...
        </nav>
      </div>

上記のデモページを別ページに用意しましたのでウインドウサイズを広げて上記との表示の違いを確認をしてみてください。

上部固定メニュー(途中から固定)

メニュー全体を.stickyの指定で囲むことで途中から追随する上部固定のメニューになります。また、.top-barを指定しているタグにデータ属性data-options="sticky_on:サイズ"を追記することで固定するウインドウサイズを指定することも可能です。サイズの部分は、small, medium,largeの3種類。※data-optionsに関しては最初に開いた際のウインドウサイズで判定されるようでサイズを変更しても追随の変化がない点とスマホサイズでメニューを開くとページ上部に表示が戻ってしまうようなので使用の際は注意が必要かと思います。

      <div class="contain-to-grid sticky">
        <nav class="top-bar" data-topbar data-options="sticky_on: small">
          ...
        </nav>
      </div>

上記のデモページを別ページに用意しましたので表示の確認をしてみてください。

© 2015 foudation5-guide.com