阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

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