语言: ENCN

二级导航栏

有了二级导航栏,你就可以在导航栏里加入额外的元素时,例如: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>