当前位置： 移动技术网 > IT编程>网页制作>Html5 > off-canvas：抽屉式页面布局的纯css实现

off-canvas：抽屉式页面布局的纯css实现

2019年03月21日  | 移动技术网IT编程  | 我要评论

青岛英才网,体坛明星遭逼婚,聚碳酸酯材质

off-canvas即抽屉式的侧边导航栏布局，导航栏在大尺寸屏幕的时候可以设置无需隐藏，小尺寸屏幕的时候自动隐藏，并出现.off-canvas-toggle用以打开导航栏，打开导航栏的状态下可以点击非导航栏区域来关闭它。以这种描述来看，它的实现概念基本上和之前说的accordion类似，需要一个可以记载状态的元素或者变量。上次使用了<input type="checkbox">，这次换作使用一个新的伪类，:target。

:target顾名思义就是记录当前焦点是否处于元素上的，而引发target状态只需要点击href指向对应id名的链接就好。也就是说，小尺寸屏幕的时候，让导航栏在target状态下显示，非target状态隐藏，此件的切换正如accordion使用了一个隐藏的checkbox一样，这里也可以利用一个完全透明的a链接，只需要注意链接只在导航栏出现的时候显示，并且链接的z-index小于导航栏即可，实现并不复杂，见代码：

.off-canvas{
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  position: relative;
  .off-canvas-toggle{
    position: absolute;
    top: $layout-spacing;
    z-index: $zindex-0;
    a{
      text-decoration: none;
      &:active{
        outline: none;
      }
    }
    @if $r2l {
      right: $layout-spacing;
    } @else {
      left: $layout-spacing;
    }
  }
  .off-canvas-sidebar{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: $zindex-2;
    overflow-y: auto;
    transition: transform 0.25s;
    @if $r2l {
      right: 0;
      transform: translate(100%);
    } @else {
      left: 0;
      transform: translate(-100%);
    }
  }
  .off-canvas-content{
    flex: auto;
    min-width: 0;
    height: 100%;
    padding: $layout-spacing;
  }
  .off-canvas-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    display: none;
  }
  // 交互
  .off-canvas-sidebar{
    &:target,
    &.active{
      transform: translate(0);
      ~ .off-canvas-overlay{
        display: block;
        z-index: $zindex-1;
      }
    }
  }
}

代码里并没什么需要特别注意的点，不过要留意.off-canvas-overlay的出现时间和显示样式，另外，隐藏.off-canvas-sidebar是借助translate的，可以看出代码里出现了变量$r2l，其实就是right to left的缩写，这个变量默认是false，决定着导航栏默认出现在哪一侧，默认从哪一侧弹出来，也决定了导航栏隐藏的时候.off-canvas-toggle放在哪一边。

设置大尺寸屏幕显示导航栏就是将导航栏的默认状态设置为和target状态一样的便好，如下：

// 大屏幕的时候可以设置不隐藏侧边栏
@include forlargescreen($off-canvas-breakpoint){
  .off-canvas{
    &.off-canvas-siderbar-show{
      .off-canvas-toggle{
        display: none;
      }
      .off-canvas-sidebar{
        flex: 0 0 auto;
        position: relative;
        transform: none;
        height: auto;
        @if $r2l{
          order: 1;
        } @else {
          order: -1;
        }
      }
      .off-canvas-overlay{
        display: none !important;
      }
    }
  }
}

点击此查看样例

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网