×
Foundation 教程Foundation 起步Foundation 文本Foundation 表格Foundation 按钮Foundation 按钮组Foundation 图标Foundation 标签Foundation 提醒框Foundation 进度条Foundation 面板Foundation 图片Foundation 下拉菜单Foundation 折叠列表Foundation 列表Foundation 选项卡Foundation 分页Foundation 价格表Foundation 顶部导航栏Foundation 侧边栏Foundation 滑动导航(Off-Canvas)Foundation MagellanFoundation 表单Foundation 输入框尺寸Foundation 开关Foundation 滑块Foundation 提示框Foundation 模态框Foundation JoyrideFoundation 均衡器Foundation 网格系统Foundation 网格-水平堆叠Foundation 网格-小型设备Foundation 网格-中型设备Foundation 网格-大型设备Foundation 块状网格Foundation 网格实例Foundation 图标参考手册Foundation CSS 参考手册Foundation CSS 可见性

Foundation 侧边栏

侧边栏导航

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>

尝试一下 »

激活链接与分割线

已点击的链接可以在 <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>

尝试一下 »

网格中的侧边栏

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

实例

<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>
      ...
    </ul>
  </div>
  <div class="medium-8 columns">
    <h1>Side Nav</h1>
    <p>Some text..</p>
    ...
  </div>
</div>

尝试一下 »

分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号：472910771)