盗用一下图片吧:实际效果图如下:

1,有一个nav的侧边栏,有一个遮罩层,随着侧边栏打开,然后点击遮罩层关闭侧边栏

关键代码:

1.给slideNav(侧边栏设置如下属性)

 .slideNav {
position: absolute;
left: -7rem;
top:;
width: 7rem;
height: 100%;
background: #555;
transition: left linear .3s;
}

2.当点击显示菜单按钮的时候:

  btn.addEventListener('click', function () {
mask.style.display = 'block';
nav.style.left = 0;
}, false);

3,当点击mask遮罩层:--菜单划出

  mask.addEventListener('click', function () {
mask.style.display = 'none';
nav.style.left = '-7rem';
}, false)

CSS动画实现菜单栏从左边滑出的更多相关文章

  1. Activity左边滑出,右边滑入的动画切换

    Activity左边滑出,右边滑入的动画切换 转载请注明出处:http://blog.csdn.net/u012301841/article/details/46920809 大家都知道Android ...

  2. (转)Android四大组件——Activity跳转动画、淡出淡入、滑出滑入、自定义退出进入

    文章转自:http://blog.csdn.net/qq_30379689/article/details/52494270 Activity跳转动画.淡入淡出.滑入滑出.自定义退出进入 前言: 系统 ...

  3. Android四大组件——Activity跳转动画、淡出淡入、滑出滑入、自定义退出进入

    Activity跳转动画.淡入淡出.滑入滑出.自定义退出进入 前言: 系统中有两个定义好的Activity跳转动画:fade_in.fade_out.slide_in_left.slide_out_r ...

  4. CSS 动画一站式指南

    CSS 动画一站式指南 目录 CSS 动画一站式指南 1. CSS 动画 1.1 变换 1.1.1 变换属性介绍 1.1.2 变换动画实践 1.2 过渡 1.2.1 过渡属性介绍 1.2.2 过渡动画 ...

  5. css transition 实现滑入滑出

    transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办?  ...

  6. 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】

    1.jquery隐藏and显示事件 $("p").hide();      //隐藏事件$("p").hide(1000);  //1秒内缓慢隐藏$(" ...

  7. 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  8. Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  9. jQuary总结7:动画操作,显示与隐藏 淡入淡出, 滑入滑出

    1 jquery提供了三组基本动画,这些动画都是标准的.有规律的效果,jquery还提供了自定义动画的功能. 2 显示与隐藏: show([speed],[easing],[callback]) 显示 ...

随机推荐

  1. iOS热更新技术被苹果官方警告?涉及到RN、Weex、JSPatch

    本文为转载文章 故事背景: 这两天,不少iOS开发群都炸窝了,原因是部分iOS开发者收到了苹果的警告邮件: 有开发者质疑可能是项目中使用了JSPatch.weex以及ReactNative等热更新技术 ...

  2. socket 995 错误 boost

    这个错误的中文解释是:由于线程退出或应用程序请求,已中止 I/O 操作. 最近几天学习boost asio 在抄官方的一个实例代码时遇到 了,这个错误搞了我三天才解决,就是在一行代码中少了一个 s 所 ...

  3. Rot13加密算法

    Rot13是一种非常简单的替换加密算法,只能加密26个英语字母.方法是:把每个字母用其后第13个字母代替. 因为有26个字母,取其一半13. s = "xrlvf23xfqwsxsqf&qu ...

  4. 【RS】CoupledCF: Learning Explicit and Implicit User-item Couplings in Recommendation for Deep Collaborative Filtering-CoupledCF:在推荐系统深度协作过滤中学习显式和隐式的用户物品耦合

    [论文标题]CoupledCF: Learning Explicit and Implicit User-item Couplings in Recommendation for Deep Colla ...

  5. 推荐系统 BPR 算法求解过程

    数据假设: 每个用户之间的偏好行为相互独立 同一用户对不同物品的偏序相互独立 则优化问题为极大化如下目标: [Reference] 1.论文翻译:BPR:面向隐偏好数据的贝叶斯个性化排序学习模型 2. ...

  6. MATLAB 向量

    MATLAB 向量: 1.MATLAB 行向量: 创建行向量括在方括号中的元素的集合,用空格或逗号分隔的元素. 2.MATLAB 列向量: 创建列向量括在方括号中的元素的集合,使用分号来分隔的元素. ...

  7. 自动化部署必备技能—定制化RPM包[转载]

    回顾下安装软件的三种方式: 1.编译安装软件,优点是可以定制化安装目录.按需开启功能等,缺点是需要查找并实验出适合的编译参数,诸如MySQL之类的软件编译耗时过长. 2.yum安装软件,优点是全自动化 ...

  8. MySQL高可用性大杀器之MHA

    MySQL高可用性大杀器之MHA   提到MySQL高可用性,很多人会想到MySQL Cluster,亦或者Heartbeat+DRBD,不过这些方案的复杂性常常让人望而却步,与之相对,利用MySQL ...

  9. PHP通过soap调用c#的WebService

    1:C# Contact public class Contact { private int _Id; private string _Name; public int id { get { ret ...

  10. 使用itext直接替换PDF中的文本

    直接说问题,itext没有直接提供替换PDF中文本的接口(查看资料得到的结论是PDF不支持这种操作),不过存在解决思路:在需要替换的文本上覆盖新的文本.按照这个思路我们需要解决以下几个问题: itex ...