Subnavbar
Subnavbar is useful when you need to put any additional elements into Navbar, like Tab Links or Searchbar. It also remains visible when Navbar hidden
Subnavbar Layout
In Navbar
<div class="page page-with-subnavbar">
<!-- Navbar -->
<div class="navbar">
<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>
Along with “left”, “right” and “title” elements, “subnavbar” also supports “sliding” class for sliding transition when used with Dynamic Navbar.
Note that page that contains Subnavbar must have additional **page-with-subnavbar**
class which adds additional top padding required for subnavbar
In Page
It is also possible to put it as a direct child of page
right after Navbar:
<div class="page page-with-subnavbar">
<!-- Navbar -->
<div class="navbar">
<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>
In Page Content
It is also possible to put it as a direct child of page-content
. In this case it will be static and scroll with the page content:
<div class="page page-with-subnavbar">
<!-- Navbar -->
<div class="navbar">
<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>
Example
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="left"></div>
<div class="title">Sub Navbar</div>
<div class="right"></div>
<div class="subnavbar">
<div class="subnavbar-inner">
<div class="segmented segmented-raised">
<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>
</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...</p>
</div>
</div>
<div class="tab" id="tab2">
<div class="block">
<p>Donec iaculis posuere massa sed dignissim...</p>
</div>
</div>
<div class="tab" id="tab3">
<div class="block">
<p>Etiam non interdum erat. Curabitur erat lacus...</p>
</div>
</div>
</div>
</div>
</div>
当前内容版权归 Framework7 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Framework7 .