Foundation 侧边栏

侧边栏导航

Foundation 使用

创建侧边栏:

实例

          
  
 
Link 1
 
Link 2
 
Link 3
 
Link 4
 
 
 
侧栏导航
 
 .side-nav 类用于创建侧栏导航，宽度为父元素100%宽度。
 
  


运行实例 »

点击 "运行实例" 按钮查看在线实例

激活链接与分割线

已点击的链接可以在

• 上使用.active类来标识，使用.divider类添加水平分割线：

  实例

            
    
   
  Link 1
   
  Link 2
   
   
  Link 3
   
  Link 4
   
   
   
  侧栏导航
   
   .active 类用于设置当期页链接。
   
   .divider 类用于设置水平的分割线。
   
    

  
  运行实例 »

  点击 "运行实例" 按钮查看在线实例

  ---

  网格中的侧边栏

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

  实例

            
    
   
   
   
  Home
   
  Learn HTML
   
  Learn JavaScript
   
  Learn CSS
   
  Learn Foundation
   
  Learn HTML
   
  Learn JavaScript
   
  Learn CSS
   
  Learn Foundation
   
   
   
   
  侧栏导航
   
  该实例将侧栏导航房子网格设计中，背景为灰色。
   
  注意： 在小屏幕尺寸上，侧栏导航是垂直的，且宽度是延展到整个屏幕（100% width）。
   
  重置浏览器查看效果。
   
  行为动作可以通过 javascript 或媒体查询来修改它。
   
   
    

  
  运行实例 »

  点击 "运行实例" 按钮查看在线实例