Foundation sidebar


May 04, 2021 12:00 Foundation5


Table of contents


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 >

尝试一下 »