Foundation 侧边栏 - 学习 Foundation 5 - 简单教程，简单编程

Foundation 在 <ul> 上使用 .side-nav CSS 类创建侧边栏

<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 CSS 类来标识当前激活的链接

<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><a class="a" href="#">Link 3</a></li>  
    <li><a class="a" href="#">Link 4</a></li>
</ul>

运行范例 »

分割线

可以在菜单项 <li> 上添加 .divider CSS 类来添加水平分隔线

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

运行范例 »

网格中的侧边栏

Foundation 允许使用网格设计模式来设置侧边导航栏

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

运行范例 »