スポンサー
Support Framework7

サブナビゲーションバー

    サブナビバーは、タブリンクや検索バーなど、ナビバーに追加の要素を入れる必要がある場合に便利です。また、ナビバーが非表示になっても、サブナビバーは表示されます。

    サブナビバーのレイアウト

    ナビバー内

    <div class="page page-with-subnavbar">
      <!-- ナビゲーションバー -->
      <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner sliding">
          <div class="left">...</div>
          <div class="title">...</div>
          <div class="right">...</div>
    
          <!-- サブナビゲーションバー -->
          <div class="subnavbar">
            <div class="subnavbar-inner">
              <!-- サブナビバーのコンテンツ(例:タブボタン -->
              <div class="segmented">
                <a href="#tab1" class="button button-active">Tab 1</a>
                <a href="#tab2" class="button">Tab 2</a>
                <a href="#tab3" class="button">Tab 3</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- ページコンテンツ -->
      <div class="page-content">
        ...
      </div>
    </div>

    subnavbar "は、"left"、"right"、"title "の各要素に加えて、"sliding "クラスをサポートしており、ダイナミックナビバーと併用することで、スライドして表示されるようになります。

    なお、サブナビバーを含むページには、サブナビバーに必要なトップパディングを追加する page-with-subnavbar クラスを追加する必要があります。

    ページ内

    サブナビバーを page の直接の子として、ナビバーの直後に配置することも可能です。

    <div class="page page-with-subnavbar">
      <!-- ナビゲーションバー -->
      <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
          <div class="left">...</div>
          <div class="title">...</div>
          <div class="right">...</div>
        </div>
      </div>
      <!-- サブナビゲーションバー -->
      <div class="subnavbar">
        <div class="subnavbar-inner">
          <!-- サブナビバーのコンテンツ(例:タブボタン -->
          <div class="segmented">
            <a href="#tab1" class="button button-active">Tab 1</a>
            <a href="#tab2" class="button">Tab 2</a>
            <a href="#tab3" class="button">Tab 3</a>
          </div>
        </div>
      </div>
      <!-- ページコンテンツ -->
      <div class="page-content">
        ...
      </div>
    </div>

    ページコンテンツ内

    page-content`の直接の子として配置することも可能です。この場合、コンテンツは静的なものとなり、ページコンテンツとともにスクロールします。

    <div class="page page-with-subnavbar">
      <!-- ナビゲーションバー -->
      <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
          <div class="left">...</div>
          <div class="title">...</div>
          <div class="right">...</div>
        </div>
      </div>
    
      <!-- ページコンテンツ -->
      <div class="page-content">
        <!-- サブナビゲーションバー -->
        <div class="subnavbar">
          <div class="subnavbar-inner">
            <!-- タブボタンなどのサブナビバーのコンテンツ -->
            <div class="segmented">
              <a href="#tab1" class="button button-active">Tab 1</a>
              <a href="#tab2" class="button">Tab 2</a>
              <a href="#tab3" class="button">Tab 3</a>
            </div>
          </div>
        </div>
        ...
      </div>
    </div>
    

    タイトル付き

    特別な subnavbar-title 要素を使って、サブナビバーに大きなタイトルを表示することもできます。

    ...
    <div class="subnavbar">
      <div class="subnavbar-inner">
        <!-- サブナビバーのタイトル -->
        <div class="subnavbar-title">Title</div>
      </div>
    </div>
    ...
    

    CSS Variables

    Below is the list of related CSS variables (CSS custom properties).

    Note that commented variables are not specified by default and their values is what they fallback to in this case.

    :root {
      /*
      --f7-subnavbar-bg-image: var(--f7-bars-bg-image);
      --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
      --f7-subnavbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
      --f7-subnavbar-border-color: var(--f7-bars-border-color);
      --f7-subnavbar-link-color: var(--f7-bars-link-color);
      --f7-subnavbar-text-color: var(--f7-bars-text-color);
      */
      --f7-subnavbar-title-line-height: 1.2;
    }
    .ios {
      --f7-subnavbar-height: 44px;
      --f7-subnavbar-inner-padding-left: 8px;
      --f7-subnavbar-inner-padding-right: 8px;
      --f7-subnavbar-title-font-size: 34px;
      --f7-subnavbar-title-font-weight: 700;
      --f7-subnavbar-title-letter-spacing: -0.03em;
      --f7-subnavbar-title-margin-left: 8px;
      --f7-subnavbar-shadow-image: none;
      /*
      --f7-subnavbar-link-height: var(--f7-subnavbar-height);
      --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
      */
    }
    .md {
      --f7-subnavbar-height: 48px;
      --f7-subnavbar-inner-padding-left: 16px;
      --f7-subnavbar-inner-padding-right: 16px;
      --f7-subnavbar-title-font-size: 20px;
      --f7-subnavbar-title-font-weight: 500;
      --f7-subnavbar-title-letter-spacing: 0;
      --f7-subnavbar-title-margin-left: 0px;
      --f7-subnavbar-shadow-image: var(--f7-bars-shadow-bottom-image);
      /*
      --f7-subnavbar-link-height: var(--f7-subnavbar-height);
      --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
      */
    }
    .aurora {
      --f7-subnavbar-height: 48px;
      --f7-subnavbar-inner-padding-left: 16px;
      --f7-subnavbar-inner-padding-right: 16px;
      --f7-subnavbar-title-font-size: 28px;
      --f7-subnavbar-title-font-weight: bold;
      --f7-subnavbar-title-letter-spacing: 0em;
      --f7-subnavbar-title-margin-left: 0px;
      --f7-subnavbar-shadow-image: none;
      --f7-subnavbar-link-height: auto;
      --f7-subnavbar-link-line-height: inherit;
    }
    

    Example

    <div class="page">
      <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
          <div class="title">Sub Navbar</div>
          <div class="subnavbar">
            <div class="subnavbar-inner">
              <div class="segmented segmented-strong">
                <a class="button tab-link tab-link-active" href="#tab1">Tab 1</a>
                <a class="button tab-link" href="#tab2">Tab 2</a>
                <a class="button tab-link" href="#tab3">Tab 3</a>
                <span class="segmented-highlight"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="page-content hide-navbar-on-scroll">
        <div class="tabs">
          <div class="tab tab-active" id="tab1">
            <div class="block">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi nisi, tincidunt ut eleifend non,
                sagittis a elit. Sed consequat odio at leo varius viverra. Proin et purus eu justo lacinia efficitur
                in sed orci. Morbi dignissim accumsan felis, at malesuada lorem aliquet finibus. Duis vitae enim a
                mauris luctus lobortis ac vel dolor. Aenean id pretium quam. Duis sed sem ullamcorper erat venenatis
                feugiat sed pretium magna. Suspendisse massa lectus, dictum congue arcu quis, auctor vulputate lectus.
                Duis vitae finibus purus, nec condimentum dui. Sed ultricies mauris vitae libero mollis lobortis. Duis
                ut tortor scelerisque, volutpat metus eget, rutrum est. Integer diam ex, condimentum vel orci a,
                lobortis bibendum urna. Aenean porttitor, eros sit amet ultrices efficitur, libero odio rhoncus justo,
                quis volutpat lorem arcu eu eros. Mauris gravida euismod diam, eget finibus quam ornare non. Nam metus
                massa, porttitor id tempor et, pharetra id felis.</p>
              <p>In sed augue non metus volutpat ultricies in quis nisi. Donec sed placerat risus. Donec nec est
                turpis. Ut egestas ipsum eget lectus imperdiet dictum. Praesent congue dui nec turpis semper,
                pellentesque ullamcorper enim sodales. Quisque porttitor porta nibh, sit amet lacinia dui imperdiet
                et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras a enim
                eget elit cursus ullamcorper fringilla eu mi. Integer commodo est elit, eu mattis quam ultrices non.
                Fusce in sagittis elit. Curabitur in consequat est. Nulla mi lorem, tincidunt eget dapibus id,
                ultrices vel sem. Etiam fringilla cursus odio, nec cursus nisi commodo quis. Nullam nec neque vel
                turpis eleifend condimentum sed quis felis. Integer ut diam nibh.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi nisi, tincidunt ut eleifend non,
                sagittis a elit. Sed consequat odio at leo varius viverra. Proin et purus eu justo lacinia efficitur
                in sed orci. Morbi dignissim accumsan felis, at malesuada lorem aliquet finibus. Duis vitae enim a
                mauris luctus lobortis ac vel dolor. Aenean id pretium quam. Duis sed sem ullamcorper erat venenatis
                feugiat sed pretium magna. Suspendisse massa lectus, dictum congue arcu quis, auctor vulputate lectus.
                Duis vitae finibus purus, nec condimentum dui. Sed ultricies mauris vitae libero mollis lobortis. Duis
                ut tortor scelerisque, volutpat metus eget, rutrum est. Integer diam ex, condimentum vel orci a,
                lobortis bibendum urna. Aenean porttitor, eros sit amet ultrices efficitur, libero odio rhoncus justo,
                quis volutpat lorem arcu eu eros. Mauris gravida euismod diam, eget finibus quam ornare non. Nam metus
                massa, porttitor id tempor et, pharetra id felis.</p>
            </div>
          </div>
          <div class="tab" id="tab2">
            <div class="block">
              <p>Donec iaculis posuere massa sed dignissim. Praesent id nibh nec massa mollis egestas. Pellentesque
                habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis elementum arcu
                nec condimentum eleifend. Aenean eget sapien ut diam egestas porttitor. Praesent quis diam fermentum,
                laoreet est consectetur, posuere enim. Morbi neque leo, vehicula at sapien ut, fringilla mollis enim.
                Cras sed libero mi. Etiam at vestibulum urna. Vestibulum ante ipsum primis in faucibus orci luctus et
                ultrices posuere cubilia Curae; In pharetra ut risus eu vehicula. Vestibulum interdum libero
                vestibulum nunc tempus vulputate. Etiam dolor lacus, porttitor pulvinar magna id, dictum hendrerit
                tortor.</p>
              <p>Curabitur egestas, mi id mattis aliquam, lectus neque facilisis sem, in fringilla leo ante in nibh.
                Proin porta tincidunt dolor, vel fringilla lorem cursus ac. Suspendisse feugiat congue metus, sed
                mattis magna imperdiet sed. Donec a nunc quis urna bibendum feugiat. Nulla rhoncus lorem et orci
                condimentum molestie. Fusce fringilla arcu nec purus posuere malesuada. Praesent nec ipsum ex.
                Praesent sed diam non nisl imperdiet molestie.</p>
              <p>Donec iaculis posuere massa sed dignissim. Praesent id nibh nec massa mollis egestas. Pellentesque
                habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis elementum arcu
                nec condimentum eleifend. Aenean eget sapien ut diam egestas porttitor. Praesent quis diam fermentum,
                laoreet est consectetur, posuere enim. Morbi neque leo, vehicula at sapien ut, fringilla mollis enim.
                Cras sed libero mi. Etiam at vestibulum urna. Vestibulum ante ipsum primis in faucibus orci luctus et
                ultrices posuere cubilia Curae; In pharetra ut risus eu vehicula. Vestibulum interdum libero
                vestibulum nunc tempus vulputate. Etiam dolor lacus, porttitor pulvinar magna id, dictum hendrerit
                tortor.</p>
              <p>Curabitur egestas, mi id mattis aliquam, lectus neque facilisis sem, in fringilla leo ante in nibh.
                Proin porta tincidunt dolor, vel fringilla lorem cursus ac. Suspendisse feugiat congue metus, sed
                mattis magna imperdiet sed. Donec a nunc quis urna bibendum feugiat. Nulla rhoncus lorem et orci
                condimentum molestie. Fusce fringilla arcu nec purus posuere malesuada. Praesent nec ipsum ex.
                Praesent sed diam non nisl imperdiet molestie.</p>
            </div>
          </div>
          <div class="tab" id="tab3">
            <div class="block">
              <p>Etiam non interdum erat. Curabitur erat lacus, luctus ac varius vel, accumsan at mauris. Praesent
                aliquet placerat urna. Mauris mattis egestas dapibus. Integer vestibulum eget massa at maximus.
                Pellentesque et viverra magna. Donec eu porta nunc. Sed id velit et diam vehicula congue in eget
                risus. Quisque ullamcorper efficitur leo ac congue.</p>
              <p>Duis ac semper risus. Suspendisse consectetur ligula tellus, at fermentum erat pulvinar vel. Nullam
                in magna sed felis posuere efficitur vel sed neque. Suspendisse nulla enim, sodales rutrum ultricies
                vitae, semper tempor odio. Nam rutrum non erat non</p>
              <p>Etiam non interdum erat. Curabitur erat lacus, luctus ac varius vel, accumsan at mauris. Praesent
                aliquet placerat urna. Mauris mattis egestas dapibus. Integer vestibulum eget massa at maximus.
                Pellentesque et viverra magna. Donec eu porta nunc. Sed id velit et diam vehicula congue in eget
                risus. Quisque ullamcorper efficitur leo ac congue.</p>
              <p>Duis ac semper risus. Suspendisse consectetur ligula tellus, at fermentum erat pulvinar vel. Nullam
                in magna sed felis posuere efficitur vel sed neque. Suspendisse nulla enim, sodales rutrum ultricies
                vitae, semper tempor odio. Nam rutrum non erat non</p>
              <p>Etiam non interdum erat. Curabitur erat lacus, luctus ac varius vel, accumsan at mauris. Praesent
                aliquet placerat urna. Mauris mattis egestas dapibus. Integer vestibulum eget massa at maximus.
                Pellentesque et viverra magna. Donec eu porta nunc. Sed id velit et diam vehicula congue in eget
                risus. Quisque ullamcorper efficitur leo ac congue.</p>
            </div>
          </div>
        </div>
      </div>
    </div>