Foundation 侧边栏导航

前言

• Foundation 侧边栏导航。

1、侧边栏导航

• Foundation 使用 <ul class="side-nav"> 创建侧边栏:

• 实例

  <ul class="side-nav">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
  </ul>

• 效果 🔗

  

1.1 激活链接与分割线

• 已点击的链接可以在 <li> 上使用 .active 类来标识，使用 .divider 类添加水平分割线：

• 实例

  <ul class="side-nav">
      <li class="active"><a class="a" href="#">Link 1</a></li>
      <li><a class="a" href="#">Link 2</a></li>
      <li class="divider"></li>
      <li><a class="a" href="#">Link 3</a></li>
      <li><a class="a" href="#">Link 4</a></li>
  </ul>

• 效果 🔗

  

2、网格中的侧边栏

• 可以使用网格设计模式来设置侧边导航栏，实例如下：

• 实例

  <div class="row">
      <div class="medium-4 columns" style="background-color:#f1f1f1;">
          <ul class="side-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Learn HTML</a></li>
              <li><a href="#">Learn JavaScript</a></li>
              <li><a href="#">Learn CSS</a></li>
              <li><a href="#">Learn Foundation</a></li>
              <li><a href="#">Learn HTML</a></li>
              <li><a href="#">Learn JavaScript</a></li>
              <li><a href="#">Learn CSS</a></li>
              <li><a href="#">Learn Foundation</a></li>
          </ul>
      </div>
      <div class="medium-8 columns">
          <h1>侧栏导航</h1>
          <p>该实例将侧栏导航房子网格设计中，背景为灰色。</p>
          <p><strong>注意：</strong> 在小屏幕尺寸上，侧栏导航是垂直的，且宽度是延展到整个屏幕（100% width）。</p>
          <p>重置浏览器查看效果。</p>
          <p>行为动作可以通过 javascript 或媒体查询来修改它。</p>
      </div>
  </div>

• 效果 🔗

  

3、滑动导航（侧边栏导航）

• Off-Canvas 滑动导航现在逐渐在移动页面变得越来越流行了 (点击菜单按钮菜单从左侧滑出)。

• 创建滑动导航实例如下：

• 实例

  <div class="off-canvas-wrap" data-offcanvas>
      <div class="inner-wrap">
          <nav class="tab-bar">
              <section class="left-small">
                  <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
              </section>
  
              <section class="middle tab-bar-section">
                  <h1 class="title">滑动导航</h1>
              </section>
          </nav>
  
          <aside class="left-off-canvas-menu">
              <ul class="off-canvas-list test">
                  <li><label>Heading</label></li>
                  <li><a href="#">Link 1</a></li>
                  <li><a href="#">Link 2</a></li>
                  <li><a href="#">Link 3</a></li>
                  <li><a href="#">Link 4</a></li>
                  <li><a href="#">Link 5</a></li>
                  <li><a href="#">Link 6</a></li>
                  <li><a href="#">Link 7</a></li>
                  <li><a href="#">Link 8</a></li>
              </ul>
          </aside>
  
          <section class="main-section">
              <h3>Qian Chia 工作室</h3>
              <p>学的不仅是技术，更是梦想！！！</p>
          </section>
  
          <a class="exit-off-canvas"></a>
      </div>
  </div>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗