# Foundation 側邊欄 ## 側邊欄導航 Foundation 使用 `&lt;ul class="side-nav"&gt;` 創建側邊欄: ### 實例 ``` <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> ``` ### 激活鏈接與分割線 已點擊的鏈接可以在 `&lt;li&gt;` 上使用 `.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> ```