副导航栏
在需要将任何其他元素放入导航栏时，例如标签链接或搜索栏，副导航栏非常有用。即使导航栏隐藏，它也会保持可见
副导航栏布局
在导航栏中
<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>与“left”、“right”和“title”元素一样，“subnavbar”在与动态导航栏一起使用时的滑动过渡也支持“sliding”类。
请注意，包含子导航栏的页面必须具有附加的 `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>