小悠学习——快乐工作,悠闲生活.超全的IT开发手册!
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULAR XML
 

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 >

尝试一下 »