Foundation 側邊欄
側邊欄導航
Foundation使用<ul class="side-nav">創建側邊欄:
實例
< 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 > < 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 >
< 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 >
< 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 >
嘗試一下»