off-canvas:抽屉式页面布局的纯css实现
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实现的更多相关文章
- 简单而兼容性好的Web自适应高度布局,纯CSS
纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...
- IT兄弟连 HTML5教程 和页面布局有关的CSS属性
使用DIV+CSS对网页进行标准化布局前,除了要掌握盒子模型,还要掌握定位和浮动两个比较重要的概念,它们可以控制在页面上排列和显示元素的方式.一个盒子是装内容的区块,如果多个盒子组合在一起使用,再通过 ...
- CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度
使用场景 在移动端屏幕宽度有限的前提下,使用横向滚动的方式展示更多的内容.在这样的需求下,希望父元素作为容器,其宽度可以又横向排列资源的总宽度动态撑开,超过祖父元素的宽度:在不超过祖父元素时,自动继承 ...
- 页面元素固定在页面底部的纯css代码(兼容IE6)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 在页面布局中,CSS如何实现左侧宽度固定,右侧宽度自适应的布局?
首先给出DOM结构 <divclass="box"> <divclass="box-left"></div> <div ...
- 01 DIV+CSS 固定页面布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是 ...
- 【前端】纯html+css+javascript实现楼层跳跃式的页面布局
实现效果演示: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>楼层跳跃式的页面布局</title&g ...
- 演示:纯CSS实现自适应布局表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 纯CSS无hacks的跨游览器多列布局
利用纯CSS创建一个等高多列的布局并不件易事,本教程将着重分析出现在多列布局的多个问题,然后为大家等来一个简单全游览器通吃的解决方法,不使用图片,脚本,CSS hacks并在最严格的XHTML 规范中 ...
随机推荐
- [AST实战]从零开始写一个wepy转VUE的工具
为什么需要 wepy 转 VUE "转转二手"是我司用 wepy 开发的功能与 APP 相似度非常高的小程序,实现了大量的功能性页面,而新业务 H5 项目在开发过程中有时也经常需要 ...
- php session序列化攻击面浅析
目录 0x00 首先,session_start()是什么? 0x01 初识php-session序列化机制 0x02 php_serialize引擎(反)序列化测试 0x03 当使用不同的引擎来处理 ...
- asp.net core系列 56 IS4使用OpenID Connect添加用户认证
一.概述 在前二篇中讲到了客户端授权的二种方式: GrantTypes.ClientCredentials凭据授权和GrantTypes.ResourceOwnerPassword密码授权,都是OAu ...
- 如何在MySQL中查询每个分组的前几名【转】
问题 在工作中常会遇到将数据分组排序的问题,如在考试成绩中,找出每个班级的前五名等. 在orcale等数据库中可以使用partition语句来解决,但在mysql中就比较麻烦了.这次翻译的文章就是专门 ...
- 玩转Spring Cloud之服务注册发现(eureka)及负载均衡消费(ribbon、feign)
如果说用Spring Boot+Spring MVC是开发单体应用(或单体服务)的利器,那么Spring Boot+Spring MVC+Spring Cloud将是开发分布式应用(快速构建微服务)的 ...
- JQuery --- 第一期 (初识jQuery, JQuery核心函数和工具方法)
个人学习笔记 初识jQuery 1.我的第一个JQuery <!DOCTYPE html> <html lang="en"> <head> & ...
- SQL SERVER数据库的简单介绍
一.数据库技术的发展 数据库技术是应数据管理任务的需求而产生的,先后经历了人工管理.文件系统.数据库系统等三个阶段. 二.关系型数据库 SQL Server属于关系型数据库. 关系模型 以二维表来描述 ...
- SQL Server 动态掩码
介绍 动态数据掩码(DDM)是SQL Server 2016引入的一个新功能.目的就是限制没有权限的人去看到一些隐私信息.管理员用户能够决定哪些字段是需要被掩码的,那么如何在不改变应用程序代码的基础上 ...
- 深入理解 new 操作符
和其他高级语言一样 JavaScript 也有 new 操作符,我们知道 new 可以用来实例化一个类,从而在内存中分配一个实例对象. 但在 JavaScript 中,万物皆对象,为什么还要通过 ne ...
- 【Hadoop篇】--Hadoop常用命令总结
一.前述 分享一篇hadoop的常用命令的总结,将常用的Hadoop命令总结如下. 二.具体 1.启动hadoop所有进程start-all.sh等价于start-dfs.sh + start-yar ...