子導覽列
當您需要將任何額外元素放入導覽列時，例如分頁連結或搜尋列，子導覽列會很有用。即使導覽列隱藏，它也會保持可見
子導覽列版面
在導覽列中
<div class="page page-with-subnavbar">
<!-- Navbar -->
<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>
<!-- Subnavbar -->
<div class="subnavbar">
<div class="subnavbar-inner">
<!-- Subnavbar content, for example tabs buttons -->
<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>
<!-- Page content -->
<div class="page-content">
...
</div>
</div>除了「左」、「右」和「標題」元素外，「子導覽列」還支援「滑動」類別，以便在與動態導覽列搭配使用時進行滑動轉場。
請注意，包含子導覽列的頁面必須有額外的 page-with-subnavbar 類別，這會新增子導覽列所需的額外頂部填補
在頁面中
也可以將它作為 page 的直接子項，緊接在導覽列之後
<div class="page page-with-subnavbar">
<!-- Navbar -->
<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>
<!-- Subnavbar -->
<div class="subnavbar">
<div class="subnavbar-inner">
<!-- Subnavbar content, for example tabs buttons -->
<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>
<!-- Page content -->
<div class="page-content">
...
</div>
</div>在頁面內容中
也可以將它作為 page-content 的直接子項。在這種情況下，它將會是靜態的，並隨著頁面內容捲動
<div class="page page-with-subnavbar">
<!-- Navbar -->
<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>
<!-- Page content -->
<div class="page-content">
<!-- Subnavbar -->
<div class="subnavbar">
<div class="subnavbar-inner">
<!-- Subnavbar content, for example tabs buttons -->
<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">
<!-- Subnavbar title -->
<div class="subnavbar-title">Title</div>
</div>
</div>
...
CSS 變數
以下是相關 CSS 變數（CSS 自訂屬性）的清單。
請注意，註解變數預設未指定，而它們的值是它們在此情況下的後備值。
:root {
/*
--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-link-height: var(--f7-subnavbar-height);
--f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
*/
}
.md {
--f7-subnavbar-height: 64px;
--f7-subnavbar-inner-padding-left: 16px;
--f7-subnavbar-inner-padding-right: 16px;
--f7-subnavbar-title-font-size: 22px;
--f7-subnavbar-title-font-weight: 400;
--f7-subnavbar-title-letter-spacing: 0;
--f7-subnavbar-title-margin-left: 0px;
/*
--f7-subnavbar-link-height: var(--f7-subnavbar-height);
--f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
*/
}
範例
subnavbar.html
<div class="page page-with-subnavbar">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="title">Subnavbar</div>
<div class="subnavbar">
<div class="subnavbar-inner">
<div class="segmented segmented-strong">
<button class="button button-small-md button-active">Link 1</button>
<button class="button button-small-md">Link 2</button>
<button class="button button-small-md">Link 3</button>
<span class="segmented-highlight"></span>
</div>
</div>
</div>
</div>
</div>
<div class="page-content">
<div class="block">
<p>Subnavbar is useful when you need to put any additional elements into Navbar, like Tab Links or Search Bar. It
also remains visible when Navbar hidden.</p>
</div>
<div class="list list-strong list-outline-ios links-list">
<ul>
<li><a href="/subnavbar-title/">Subnavbar Title</a></li>
</ul>
</div>
</div>
</div>subnavbar-title.html
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="subnavbar">
<div class="subnavbar-inner">
<div class="subnavbar-title">Page Title</div>
</div>
</div>
</div>
</div>
<div class="page-content">
<div class="block">
<p>It also possible to use Subnavbar to display page title and keep navbar only for actions.</p>
</div>
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, consequatur quia amet voluptate vero quasi,
veniam, quisquam dolorum magni sint enim, harum expedita excepturi quas iure magnam minus voluptatem quaerat!
</p>
<p>Dolore laboriosam error magnam velit expedita recusandae, dolor asperiores unde, sint, veritatis illum ipsum?
Nulla ratione nobis, ullam debitis. Inventore sapiente rem dolore eum ipsa totam perspiciatis cupiditate, amet
maiores!</p>
<p>Ratione quod minus ipsum maxime cum voluptate molestiae adipisci placeat ut illo, alias nobis perferendis magni
odio sunt, porro, totam praesentium possimus! Autem inventore ut provident animi quae, impedit id!</p>
<p>Aperiam ea ab harum. Quis dolorem cupiditate, incidunt mollitia ducimus voluptatem commodi! Odio quasi amet hic
nesciunt, quibusdam, est vero repellat sapiente perferendis, optio laboriosam in culpa veniam alias ad.</p>
<p>A fuga corporis harum velit maiores, quaerat accusantium cum aspernatur consequuntur dolor vel fugit omnis est
dolorum delectus debitis aperiam distinctio eveniet vero nihil voluptatum culpa. Accusamus aliquid facere
tenetur?</p>
</div>
</div>
</div>