Foundation sidebar
Sidebar navigation
Foundation creates sidebars using
<ul class="side-nav">
Instance
<
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
>
尝试一下 »
The sidebar in the grid
We can use grid design mode to set up side navigation bars, as follows:
实例
<
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
>
尝试一下 »