有了二级导航栏,你就可以在导航栏里加入额外的元素时,例如:Tab标签链接或搜索栏。并且在导航栏隐藏时,二级导航栏仍然可见。
<div class="navbar-inner">
<div class="left">...</div>
<div class="center">...</div>
<div class="right">...</div>
<!-- Sub navbar -->
<div class="subnavbar">
<!-- Sub navbar content, for example tabs buttons -->
<div class="buttons-row">
<a href="#tab1" class="button active">Tab 1</a>
<a href="#tab2" class="button">Tab 2</a>
<a href="#tab3" class="button">Tab 3</a>
</div>
</div>
</div>
连同”left“,”right“,”center“元素一起,“subnavbar”同样支持在使用动态布局的时候通过"sliding"样式实现滑动切换效果。
需要注意的是当使用二级导航栏是必须包含样式 "with-subnavbar" 新增导航栏的上内边距
<div class="views">
<div class="view view-main">
<div class="navbar">
<div class="navbar-inner">
<div class="left"></div>
<div class="center">Sub Navbar</div>
<div class="right"></div>
<!-- Sub navbar -->
<div class="subnavbar">
<div class="buttons-row">
<a href="#tab1" class="button tab-link active">Tab 1</a>
<a href="#tab2" class="button tab-link">Tab 2</a>
<a href="#tab3" class="button tab-link">Tab 3</a>
</div>
</div>
</div>
</div>
<div class="pages navbar-through">
<!-- Pag has additional "with-subnavbar" class -->
<div data-page="home" class="page with-subnavbar">
<div class="page-content hide-bars-on-scroll">
<div class="tabs">
<div id="tab1" class="tab active">
<div class="content-block">
<p>Lorem ipsum dolor ...</p>
<p>In sed augue non ...</p>
</div>
</div>
<div id="tab2" class="tab">
<div class="content-block">
<p>Donec iaculis ...</p>
<p>Curabitur egestas, mi ...</p>
<p>Donec iaculis posuere ...</p>
</div>
</div>
<div id="tab3" class="tab">
<div class="content-block">
<p>Etiam non interdum erat...</p>
<p>Duis ac semper risus. Suspendisse...</p>
<p>Etiam non interdum erat...</p>
<p>Duis ac semper risus. Suspendisse...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>