コンポーネント

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

オフキャンバス Off-canvas

Foundationで用意されているオフキャンバス Off-canvasの紹介。
オフキャンバスはドロワーメニューとも呼ばれるスマホで良く見かける横にスライドするメニューを設置できます。当サイトの上部に設置しているメニューもオフキャンバスで実装しています。
Bootstarap3では標準で用意されていないのでFoundation5を選択するひとつの理由になるかもしれません。

全体を.off-canvas-wrapとデータ属性data-offcanvasを併記で指定。その内側全体をinner-wrap指定で囲みます。
メニューをスライドさせるリンクに左側スライドなら.left-off-canvas-toggle、右側スライドなら.right-off-canvas-toggleを指定します。
実際に表示するメニューを囲むタグに.left-off-canvas-menu、右側なら.right-off-canvas-menuを指定します。
最後に、メニュー以外の箇所を触ってもメニューが閉じるように.exit-off-canvasを指定したリンクを置きます。

下記デモのンクを押すとメニューが出てくるのをご確認頂けます。

Menu Left  Menu Right

コンテンツの内容

      <div class="off-canvas-wrap" data-offcanvas>
        <div class="inner-wrap">

          <a class="left-off-canvas-toggle" href="#">Menu</a>

          <aside class="left-off-canvas-menu">
            <ul>
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
            </ul>
          </aside>

          <p>コンテンツの内容</p>

          <a class="exit-off-canvas"></a>

        </div>
      </div>

実際にサイトで使用する際には上記のような形で使用することは少なく、こちらのタイトル掲載部分のある付きオフキャンバスメニューを使用することが多いかと思います。

上記のinner-wrap指定のタグの中に.tab-barを指定し、黒帯のタイトルやハンバーガーメニューを置く場所を作成します。左側にハンバーガーメニューを使用したい場合は.left-smallで設置場所を確保し、その中に.left-off-canvas-toggle.menu-iconを併記しspanタグを囲むリンクを設置します。右側に設置したい場合はleft表記部分をrightに置き換えてください。
※spanタグがないとハンバーガーメニューのアイコンが出てきませんので注意してください。
実際に表示するメニューを囲むタグに左側なら.left-off-canvas-menu、右側なら.right-off-canvas-menuを指定し、リストタグに.off-canvas-listを指定します。リンクのリストをlabelタグで囲むとカテゴリ分けなどで使える表示になります。
※高さはコンテンツの内容が入る部分に依存する点に注意してください。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      <div class="off-canvas-wrap" data-offcanvas>
        <div class="inner-wrap">
          <nav class="tab-bar">
            <section class="left-small">
              <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
            </section>

            <section class="middle tab-bar-section">
              <h1 class="title">Foundation5の使い方</h1>
            </section>

            <section class="right-small">
              <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
            </section>
          </nav>

          <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list">
              <li><label>Left Menu</label></li>
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
            </ul>
          </aside>

          <aside class="right-off-canvas-menu">
            <ul class="off-canvas-list">
              <li><label>right Menu</label></li>
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
            </ul>
          </aside>

          <section class="main-section">
          <p>コンテンツの内容</p>
          </section>

        <a class="exit-off-canvas"></a>

        </div>
      </div>
タイトルの位置と指定

.tab-bar内でのタイトルはh1~h6の見出しタグを指定し、それを囲むタグに余白などの設定が入った.tab-bar-sectionと位置を指定する.left.middle.rightのいずれかを併記します。



      <div class="left tab-bar-section">
        <h1 class="title">Foundation5の使い方</h1>
      </div>

      <div class="middle tab-bar-section">
        <h1 class="title">Foundation5の使い方</h1>
      </div>

      <div class="right tab-bar-section">
        <h1 class="title">Foundation5の使い方</h1>
      </div>

リストの中にリストを含む多階層の場合。
多階層になるリストタグに左側のメニューであれば.left-submenuを、右側のメニューであれば.right-submenu指定。メニュー全体を囲むリストに.has-submenuを指定します。
中の階層に移った際に上の階層に戻る用のリンクのリストに.backの指定を付けると矢印付きのリンクになります。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      <aside class="left-off-canvas-menu">
        <ul class="off-canvas-list">
          <li><label>多階層リンク</label></li>
          <li class="has-submenu"><a href="#">Link 1-1 多階層リンク1</a>
            <ul class="left-submenu">
              <li class="back"><a href="#">Back</a></li>
              <li><label>Level 2</label></li>
              <li><a href="#">Link 2-1</a></li>
              <li class="has-submenu"><a href="#">Link 2-2 多階層リンク2</a>
                <ul class="left-submenu">
                  <li class="back"><a href="#">Back</a></li>
                  <li><label>Level 3</label></li>
                  <li><a href="#">Link 3-1</a></li>
                </ul>
              </li>
              <li><a href="#">Link 2-3</a></li>
            </ul>
          </li>
          <li><a href="#">Link 1-2</a></li>
        </ul>
      </aside>
      
© 2015 foudation5-guide.com