Foundation 侧边栏

侧边栏导航

Foundation 使用

创建侧边栏:



成都创新互联公司主打移动网站、网站制作、网站设计、网站改版、网络推广、网站维护、域名注册、等互联网信息服务，为各行业提供服务。在技术实力的保障下，我们为客户承诺稳定，放心的服务，根据网站的内容与功能再决定采用什么样的设计。最后，要实现符合网站需求的内容、功能与设计，我们还会规划稳定安全的技术方案做保障。

实例

<
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
>

尝试一下 »

激活链接与分割线

已点击的链接可以在

• 上使用 .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
  >
  
  尝试一下 »

  
  网站标题：创新互联Foundation教程：Foundation 侧边栏
  浏览路径：http://www.turtgq.com/article/djdiigc.html