阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    Foundation 侧边栏

    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> 上使用 .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>
    
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录