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 >

尝试一下 »