コンポーネント

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

ナビゲーション

Foundationで用意されている様々なナビゲーションの紹介。
タブ型ナビゲーション Tabs、サイドナビ Side Nav、サブナビ Sub Nav、マゼラン Magellanの紹介になります。

リストタグに.tabsの指定とデータ属性data-tabを指定。タブボタンになるリストに.tab-titleを指定しタイトルとリンク先を指定。.activeを指定することで現在表示を明示できます。
実際に表示する内容を囲むタグに.tabs-contentを指定し、それぞれ実際に表示する内容のタグに.contentと上記ボタンと紐づけたリンク先のIDを指定することで表示する内容を切り替えることができます。また、.activeを指定することで最初に表示しておく内容をを指定できます。

下記デモでボタンを押すと内容が切り替わるのが確認できます。

Tab 1の内容

Tab 2の内容

Tab 3の内容

      <ul class="tabs" data-tab>
        <li class="tab-title active"><a href="#panel1">Tab 1</a></li>
        <li class="tab-title"><a href="#panel2">Tab 2</a></li>
        <li class="tab-title"><a href="#panel3">Tab 3</a></li>
      </ul>
      <div class="tabs-content">
        <div class="content active" id="panel1">
          <p>Tab 1の内容</p>
        </div>
        <div class="content" id="panel2">
          <p>Tab 2の内容</p>
        </div>
        <div class="content" id="panel3">
          <p>Tab 3の内容</p>
        </div>
      </div>

標準のタブ型ナビゲーションに.verticalを併記することで縦並びタブボタンのタブ型ナビゲーションになります。

Tab 1の内容

Tab 2の内容

Tab 3の内容

      <ul class="tabs vertical" data-tab>

タブ型ナビゲーションにdata-tab data-options="deep_linking: true"を併記するとアンカーリンクのようにタブボタンを押した際にタブの表示位置に移動します。
公式の英語が正確に理解できてないので違う役割かもしれません。。Deep linking to tabs or tab contentsという部分です。

Tab 1の内容

Tab 2の内容

Tab 3の内容

      <ul class="tabs" data-tab data-options="deep_linking: true">

リストタグに.side-navを指定するだけでシンプルな縦並びのリンクになります。リストに.activeを指定すると現在地を明示でき色が変わります。また、空のリストにdividerを指定すると区切り線が挿入できます。区切り線が標準では白が指定されているので下記のデモでは違う色を指定しています。

      <ul class="side-nav">
        <li class="active"><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li class="divider"></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>

dlタグに.sub-navを指定するだけと横並びのリンクになります。リストに.activeを指定すると現在地を明示でき色が変わります。
※どういう用途を目的して用意されたナビなのかわかりませんが、公式のデモを見るとソート検索などする時などに使い勝手が良いナビゲーションなのかなという感じです。

      <ul class="side-nav">
        <li class="active"><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li class="divider"></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>

マゼランと読むのかも怪しいですが機能的にはスクロールに追随する上部固定メニューとBootstarapでいうスクロールスパイの機能を付けたメニューという感じです。リンク先の上部に辿り着くとメニューの現在地を明示する表示を切り替えます。
公式のデモですとサブナビにデータ属性data-magellan-expedition="fixed"で囲み、それぞれのリンク先と内容を用意しています。
デモを用意したのでそちらを見て頂くと何となくどんな機能かわかるかと思います

      <div data-magellan-expedition="fixed">
        <dl class="sub-nav">
        <dd data-magellan-arrival="first"><a href="#first">First</a></dd>
        <dd data-magellan-arrival="second"><a href="#second">Second</a></dd>
        </dl>
      </div>

      <h3 data-magellan-destination="first">First</h3>
      <a name="first"></a>

      <h3 data-magellan-destination="second">Second</h3>
      <a name="second"></a>
© 2015 foudation5-guide.com