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:;
    width: 100%;
    height: 100%;
    z-index: $zindex-2;
    overflow-y: auto;
    transition: transform 0.25s;
    @if $r2l {
      right:;
      transform: translate(100%);
    } @else {
      left:;
      transform: translate(-100%);
    }
  }
  .off-canvas-content{
    flex: auto;
    min-width:;
    height: 100%;
    padding: $layout-spacing;
  }
  .off-canvas-overlay{
    position: fixed;
    top:;
    left:;
    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:;
        } @else {
          order: -1;
        }
      }
      .off-canvas-overlay{
        display: none !important;
      }
    }
  }
}

点击此查看样例

off-canvas:抽屉式页面布局的纯css实现的更多相关文章

  1. 简单而兼容性好的Web自适应高度布局,纯CSS

    纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...

  2. IT兄弟连 HTML5教程 和页面布局有关的CSS属性

    使用DIV+CSS对网页进行标准化布局前,除了要掌握盒子模型,还要掌握定位和浮动两个比较重要的概念,它们可以控制在页面上排列和显示元素的方式.一个盒子是装内容的区块,如果多个盒子组合在一起使用,再通过 ...

  3. CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度

    使用场景 在移动端屏幕宽度有限的前提下,使用横向滚动的方式展示更多的内容.在这样的需求下,希望父元素作为容器,其宽度可以又横向排列资源的总宽度动态撑开,超过祖父元素的宽度:在不超过祖父元素时,自动继承 ...

  4. 页面元素固定在页面底部的纯css代码(兼容IE6)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 在页面布局中,CSS如何实现左侧宽度固定,右侧宽度自适应的布局?

    首先给出DOM结构 <divclass="box"> <divclass="box-left"></div> <div ...

  6. 01 DIV+CSS 固定页面布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是 ...

  7. 【前端】纯html+css+javascript实现楼层跳跃式的页面布局

    实现效果演示: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>楼层跳跃式的页面布局</title&g ...

  8. 演示:纯CSS实现自适应布局表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 纯CSS无hacks的跨游览器多列布局

    利用纯CSS创建一个等高多列的布局并不件易事,本教程将着重分析出现在多列布局的多个问题,然后为大家等来一个简单全游览器通吃的解决方法,不使用图片,脚本,CSS hacks并在最严格的XHTML 规范中 ...

随机推荐

  1. [AST实战]从零开始写一个wepy转VUE的工具

    为什么需要 wepy 转 VUE "转转二手"是我司用 wepy 开发的功能与 APP 相似度非常高的小程序,实现了大量的功能性页面,而新业务 H5 项目在开发过程中有时也经常需要 ...

  2. php session序列化攻击面浅析

    目录 0x00 首先,session_start()是什么? 0x01 初识php-session序列化机制 0x02 php_serialize引擎(反)序列化测试 0x03 当使用不同的引擎来处理 ...

  3. asp.net core系列 56 IS4使用OpenID Connect添加用户认证

    一.概述 在前二篇中讲到了客户端授权的二种方式: GrantTypes.ClientCredentials凭据授权和GrantTypes.ResourceOwnerPassword密码授权,都是OAu ...

  4. 如何在MySQL中查询每个分组的前几名【转】

    问题 在工作中常会遇到将数据分组排序的问题,如在考试成绩中,找出每个班级的前五名等. 在orcale等数据库中可以使用partition语句来解决,但在mysql中就比较麻烦了.这次翻译的文章就是专门 ...

  5. 玩转Spring Cloud之服务注册发现(eureka)及负载均衡消费(ribbon、feign)

    如果说用Spring Boot+Spring MVC是开发单体应用(或单体服务)的利器,那么Spring Boot+Spring MVC+Spring Cloud将是开发分布式应用(快速构建微服务)的 ...

  6. JQuery --- 第一期 (初识jQuery, JQuery核心函数和工具方法)

    个人学习笔记  初识jQuery 1.我的第一个JQuery <!DOCTYPE html> <html lang="en"> <head> & ...

  7. SQL SERVER数据库的简单介绍

    一.数据库技术的发展 数据库技术是应数据管理任务的需求而产生的,先后经历了人工管理.文件系统.数据库系统等三个阶段. 二.关系型数据库 SQL Server属于关系型数据库. 关系模型 以二维表来描述 ...

  8. SQL Server 动态掩码

    介绍 动态数据掩码(DDM)是SQL Server 2016引入的一个新功能.目的就是限制没有权限的人去看到一些隐私信息.管理员用户能够决定哪些字段是需要被掩码的,那么如何在不改变应用程序代码的基础上 ...

  9. 深入理解 new 操作符

    和其他高级语言一样 JavaScript 也有 new 操作符,我们知道 new 可以用来实例化一个类,从而在内存中分配一个实例对象. 但在 JavaScript 中,万物皆对象,为什么还要通过 ne ...

  10. 【Hadoop篇】--Hadoop常用命令总结

    一.前述 分享一篇hadoop的常用命令的总结,将常用的Hadoop命令总结如下. 二.具体 1.启动hadoop所有进程start-all.sh等价于start-dfs.sh + start-yar ...